title: Nav bar submenu container: How to cope with long list-item overflow by wrapping?
body: <p>I have a hosted blog and I'm modifying templates, however the code for adding submenus to the nav bar is straight out of this great tutorial:</p>
  
  <p><a href="http://www.devinrolsen.com/pure-css-horizontal-menu/" rel="nofollow">http://www.devinrolsen.com/pure-css-horizontal-menu/</a> </p>
  
  <p>I also read this answer to the question on Stackoverflow <a href="http://bit.ly/16KQN0M" rel="nofollow">http://bit.ly/16KQN0M</a></p>
  
  <p>But if it's a matter of clearing a float, I can't see where to put <code>"clear: both;"</code> in the HTML (at least, nothing I've tried has worked).</p>
  
  <p>And changing <code>#dropnav li li</code> to <code>display: block;</code> doesn't work either. There must be something I'm missing ...</p>
  
  <p>Here is the CSS. The classes at the top are related to the template but I'll leave them in as they might be relevant.</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  /* Derived from http://www.devinrolsen.com/pure-css-horizontal-menu/ */
  
  
  #pagebody { position: inherit !important; width: 100%; } 
  #pagebody-inner { position: inherit !important; width: 100%; } 
  
  #alpha, #beta, #gamma, #delta {
      display: inline; 
      position: inherit !important; 
      float: left; 
      min-height: 0px; 
  }
  
  #dropnav 
  {height:31px;} 
  
  #dropnav ul
  {margin:0px; padding:0px;}
  
  #dropnav ul li
  {display:inline; float:left; list-style:none; position: relative; height:31px; 
  width: 175px; } 
  
  #dropnav li a
  {color:#efe1ca; font-family:'Roboto Condensed', sans-serif; font-weight:400;      
  font-size:12px; }
  
  
  #dropnav li a:hover
  {color:#fff; text-decoration: none;}
  
  #dropnav li ul
  {margin: 0px; padding: 0px; display: none; position: absolute;  z-index: 99; top: 
  31px; background-color: #f6f3cb; width: 250px;} 
  
  #dropnav li:hover ul
  {display:block; width:250px; } 
  
  #dropnav li li
  {list-style:none; display:list-item; font-size:100%;} 
  
  #dropnav li li a
  {color: #7a3535; text-decoration:underline; width: 250px; font-size: 16px; } 
  
  #dropnav li li a:hover
  {color:#000000; text-decoration:none; } 
  
  li#main {padding: 0px;} /* Sets the padding of items in the main menu */
  
  &lt;/style&gt;
  </code></pre>
  
  <p>And HTML markup, with titles removed:</p>
  
  <pre><code>&lt;div id="main"&gt;
  &lt;div id="dropnav"&gt;
  &lt;ul&gt;
  
  &lt;li class="nav-list-item"&gt;&lt;a href=""&gt;-------&lt;/a&gt;
    &lt;ul id="subnav"&gt;
      &lt;li style="width:180px;"&gt;&lt;a href=""&gt;-------&lt;/a&gt;&lt;/li&gt;
      &lt;li style="width:180px;"&gt;&lt;a href=""&gt;-------&lt;/a&gt;&lt;/li&gt;
      &lt;li style="width:180px;"&gt;&lt;a href=""&gt;-------&lt;/a&gt;&lt;/li&gt;
      &lt;li style="width:180px;"&gt;&lt;a href=""&gt;-------&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt; 
  &lt;/li&gt;
  
  &lt;li class="nav-list-item"&gt;&lt;a href=""&gt;-------&lt;/a&gt;
    &lt;ul id="subnav"&gt;
      &lt;li style="width:180px;"&gt;&lt;a href=""&gt;-------&lt;/a&gt;&lt;/li&gt;
      &lt;li style="width:180px;"&gt;&lt;a href=""&gt;-------&lt;/li&gt;
    &lt;/ul&gt; 
  &lt;/li&gt;
  
  &lt;/ul&gt; 
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>