Making a static/sticky menu bar with CSS
<p>I am trying to get my navigation/menu bar to "stick" to the top of the page even as the reader scrolls down. I've tried both position: fixed; and position: absolute;, but it hasn't been working and I'm not sure why. I'll include the code below:</p>

<p><strong>CSS</strong></p>

<pre><code> /* Navigation */

    div.menu {
        width:100%;
        height:40px;
        display:block;
        position:fixed;
        top:0;
        right:0;
    }
    div.menu ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        font-size: .8em;
        position: absolute;
        right: 0;
        top: 0;
        width: 40%;
    }
    div.menu li {
        display: inline-block;
    }
    div.menu li a{
        display: inline-block;
        text-align: center;
        padding: 1.5em;
    }
    div.menu li a:hover {
        background-color: #6b9d68;
        color: white;
    }
    div.menu li a.active {
        background-color: #000000;
        color: white;
    }
</code></pre>

<p><strong>HTML</strong></p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en-US"&gt;
&lt;head&gt;
    &lt;div class="menu"&gt;
        &lt;ul&gt;
        &lt;li&gt;&lt;a href="index.php"&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="cv.php"&gt;CV&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="research.php"&gt;Research&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="teaching.php"&gt;Teaching&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="http://academia-25-to-life.blogspot.com"&gt;Blog&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;

    &lt;div class="logo"&gt;
        &lt;img src="logo.jpg"&gt;
    &lt;/div&gt;

    &lt;div class="divider"&gt;
        &lt;img src="divider.jpg"&gt;
    &lt;/div&gt;
&lt;/head&gt;
&lt;/html&gt;
</code></pre>