title: How do I create a vertical dropdown menu
body: <p>What I am trying to accomplish here is a vertical drop down menu on the element, (ul) "fav blogs". I trying to adjust the css so it only vertically drops down the sub menus, "rawrmerawr" and "realfriennds" directly under the "fav blogs" element. </p>
  
  <p>No matter what CSS that I am using I cannot figure out what the correct code is that I use. When I hover over the "There's shit here" element it correctly drops down the other (ul - unordered list) but when i am hovering over the "fav blogs" it does not do so. </p>
  
  <p>You can view the nav bar live <a href="http://lowheartrate.tumblr.com" rel="nofollow">here</a></p>
  
  <p><strong>A look at the html code:</strong></p>
  
  <pre><code>&lt;nav&gt;
  &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;There's some shit here &lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;fav blogs &lt;/a&gt;&lt;/li&gt;
                  &lt;ul&gt;
  
                      &lt;li&gt;&lt;a href="http://rawrmerawr.tumblr.com/" target="_blank"&gt;sun&amp;stars&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#" target="_blank"&gt;realfriennds&lt;/a&gt;&lt;/li&gt;
  
                  &lt;/ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;musicc&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;only me!!&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>A look at the css code:</strong></p>
  
  <pre><code>nav {
  position: fixed;
  margin: 0 0 0 5px;
  }
  
  nav ul ul, ul ul ul li {
  display: none;
  }
  
  nav ul li:hover &gt; ul {
      display: block;
      margin: 0 0 0 10px;
  }
  
  nav ul ul ul li:hover &gt; ul {
      display: block;
      margin: 0 0 20px 20px;
  }
  </code></pre>