title: Fixed positioning breaks navigation menu
body: <p>I have a navigation bar with sub menus ordered like:</p>
  
  <p>nav > ul > li + div > ul > li > a</p>
  
  <p>Each nav > ul > li has a div under it for a submenu that is hidden until
  the user hovers over nav>ul>li. When the nav has no positioning this works,
  but when I set position:fixed on nav, the submenus stop appearing. I've tried everything
  I know to try and I have no idea why this is happening. It's not browser specific, the problem persists on chrome,safari and firefox.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt; 
  &lt;html lang="en"&gt; 
  &lt;head&gt; 
      &lt;meta charset="UTF-8"&gt; 
      &lt;title&gt;Title&lt;/title&gt; 
      &lt;link rel="stylesheet" type="text/css" href="navbar.css"&gt; 
      &lt;link rel="stylesheet" type="text/css" href="header.css"&gt; 
  &lt;/head&gt; 
  &lt;body&gt; 
      &lt;nav&gt; 
      &lt;ul&gt;     
              &lt;li&gt;&lt;a class="top" href="TODO"&gt;Blog &lt;/a&gt; &lt;/li&gt; 
              &lt;div&gt; 
                      &lt;ul&gt; 
                              &lt;li&gt;&lt;a href="TODO"&gt;Blog1&lt;/a&gt;&lt;/li&gt; 
                              &lt;li&gt;&lt;a href="TODO"&gt;Blog2&lt;/a&gt;&lt;/li&gt; 
                              &lt;li&gt;&lt;a href="TODO"&gt;Blog3&lt;/a&gt;&lt;/li&gt; 
  
                      &lt;/ul&gt; 
              &lt;/div&gt; 
              &lt;li&gt;&lt;a href="TODO"&gt;Links &lt;/a&gt;&lt;/li&gt; 
                      &lt;div&gt; 
                              &lt;ul&gt; 
                                      &lt;li&gt;&lt;a href="TODO"&gt;Link1&lt;/a&gt;&lt;/li&gt; 
                                      &lt;li&gt;&lt;a href="TODO"&gt;Link2&lt;/a&gt;&lt;/li&gt; 
                                      &lt;li&gt;&lt;a href="TODO"&gt;Link3&lt;/a&gt;&lt;/li&gt; 
                              &lt;/ul&gt; 
                      &lt;/div&gt; 
              &lt;li&gt;&lt;a href="TODO"&gt;Projects&lt;/a&gt; &lt;/li&gt; 
              &lt;div&gt; 
                      &lt;ul&gt; 
                              &lt;li&gt;&lt;a href="TODO"&gt;Project1&lt;/a&gt;&lt;/li&gt; 
                              &lt;li&gt;&lt;a href="TODO"&gt;Project2&lt;/a&gt;&lt;/li&gt; 
  
                      &lt;/ul&gt;
              &lt;/div&gt;
              &lt;li&gt;&lt;a class="bottom" href="TODO"&gt;About&lt;/a&gt; &lt;/li&gt;
              &lt;div&gt;&lt;/div&gt;
      &lt;/ul&gt;
      &lt;/nav&gt;
      &lt;header&gt;
              &lt;p&gt; My header &lt;/p&gt;
      &lt;/header&gt;
      &lt;section&gt;
              &lt;p&gt; My section &lt;/p&gt;
      &lt;/section&gt;
      &lt;footer&gt;
              &lt;p&gt; My footer &lt;/p&gt;
      &lt;/footer&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body {
    background-color: #EBE8E4;
    color: #222;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",     Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
    font-size: 15px;
  }   
  nav {
      position:fixed;
  }   
  
  nav,nav &gt; ul &gt; li + div ul &gt; li &gt; a { 
    background-color: #fff;
    border: 1px solid #dedede;
    border-radius: 4px;
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
    color: #888;
    text-decoration:none;
    display: block;
    margin: 8px 22px 8px 22px;
    overflow: hidden;
    width: 165px; 
  }   
  nav &gt; ul &gt; li + div ul &gt; li &gt; a { 
      margin:0px;
      width:117px;
      border:0px;
      box-shadow: 0 0px 0px 0px;
  }   
    nav ul {
      margin: 0;
      padding: 0;
    }   
  
      nav ul li {
        display: block;
        list-style-type: none;
      }   
  
  
  nav &gt; ul &gt; li &gt; a { 
    color: #aaa;
    display: block;
    line-height: 56px;
    padding: 0 24px;
    text-decoration: none;
  }   
  
    nav &gt; ul &gt; li:hover {
      background-color: rgb( 40, 44, 47 );
    }   
  
    nav &gt; ul &gt; li:hover &gt; a { 
      color: rgb( 255, 255, 255 );
    }   
  
  nav &gt; ul &gt; li + div {
    background-color: rgb( 40, 44, 47 );
    border-radius: 4px;
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
    display: none;
    margin: 0;
    opacity: 0;
    position: absolute;
    width: 165px;
    visibility: hidden;
  
  }
  nav &gt; ul &gt; li:hover + div,
      nav &gt; ul &gt; li + div:hover {
     display: block;
     margin-left:165px;
     margin-top:-56px;
     opacity: 1;
     visibility: visible;
     background-color:rgb(255,255,255);
     block-radius:4px;
   }
  
  nav &gt; ul &gt; li + div &gt; ul &gt; li:hover {
      background-color: rgb(250,0,0);
      border: 0px;
      border-radius:4px;
  }
  nav &gt; ul &gt; li + div  ul &gt; li:hover &gt; a {
      background-color: rgb(40,44,47);
      color: rgb( 250 , 250 ,250);
  }
  
  nav &gt; ul &gt; li + div ul &gt; li {
    display: block;
  }
  
  nav &gt; ul &gt; li + div ul &gt; li &gt; a {
    color: #aaa;
    background-color:#fff;
    display: block;
    padding: 12px 24px;
    text-decoration: none;
  }
  
  nav &gt; ul &gt; li &gt; div ul &gt; li:hover &gt; a {
    background-color: rgba( 255, 255, 255, 0.1);
  }
  </code></pre>