title: CSS menu: dropdown items display as block
body: <p>Since I am discovering and struggling with CSS dropdown menus, I hope you won´t mind this simple question. I have a fully functioning CSS dropdown menu, but just after I prevented the horizontal menu from wrapping (in case the browser would be resized), I am having trouble displaying the dropdown items below each other (block). Instead they are now also displayed next to each other (inline-block).</p>
  
  <p>Can anybody tell me which line I have to add? This was the code that I added that changed both my menu from wrapping (good) and my dropdown items from being displayed below each other:</p>
  
  <pre><code>nav ul li {
  display: inline-block;
  float: none;
  }
  </code></pre>
  
  <p>Full CSS menu code:</p>
  
  <pre><code>/* Set general properties for main menu items */
  
  nav ul {
  background: linear-gradient(to bottom, rgba(200,220,154,0) 30%, #c8dc9a 90%);  
  background: -moz-linear-gradient(top, rgba(200,220,154,0) 30%, #c8dc9a 90%); 
  background: -webkit-linear-gradient(top, rgba(200,220,154,0) 30%, #c8dc9a 90%); 
  background: -ms-linear-gradient(top, rgba(200,220,154,0) 30%, #c8dc9a 90%);
  background: -o-linear-gradient(top, rgba(200,220,154,0) 30%, #c8dc9a 90%);
  padding: 0;
  margin: 0;
  font-size: 16px; 
  white-space: nowrap;
  list-style: none;
  position: relative;
  text-align: left;
  }
  
  nav ul:after {
      content: ""; 
      clear: both; 
      display: block;
  }
  
  nav ul li {
  display: inline-block;
  float: none;
  border-bottom: 3px solid #244612;
  padding:0 0 0 7px;
  }
  
  /* Set hover properties for main menu items */
  
  nav ul li:hover {
      background: #e29a0e;
      background: linear-gradient(to bottom, rgba(226,154,14,0) 0%, #e29a0e 100%);
      background: -moz-linear-gradient(top, rgba(226,154,14,0) 0%, #e29a0e 100%);
      background: -webkit-linear-gradient(top, rgba(226,154,14,0) 0%, #e29a0e 100%);
      background: -ms-linear-gradient(top, rgba(226,154,14,0) 0%, #e29a0e 100%);
      background: -o-linear-gradient(top, rgba(226,154,14,0) 0%, #e29a0e 100%);
  }
  
      nav ul li:hover a {
          color: #ffffff;
      }
  
      nav ul li:hover ul li a{    
          color: #757575;
      }
  
  nav ul li a {
      display: block;
      padding: 10px 13px;
      color: #757575; 
      text-decoration: none;
  }
  
  /* Set properties for hiding/unhiding dropdown items */ 
  
  nav ul ul {
  display: none;
  }
  
  nav ul li:hover &gt; ul {
      display: block;
  }
  
  /* Set general properties for dropdown menu items */
  
  nav ul ul {
  background: #F7F7F7; 
  border-radius: 0px; 
  padding: 0;
  position: absolute; 
  top: 100%;
  margin-left: -7px;
  font-size: 14px;
  white-space: normal;
  float: left;
  }
  
  /* Set hover properties for dropdown menu items */  
  
  nav ul ul li {
      border-top: 1px solid #C9CCCF;
      border-bottom: 0px solid #C9CCCF;
      position: relative;
      padding: 0;
  }
  
      nav ul ul li a {
          padding: 10px 25px;
      }   
  
          nav ul li:hover ul li a:hover {
              background: #e29a0e;
              color: #ffffff;
          }
  </code></pre>