title: CSS Horizontal Menu: display: inline; won't work
body: <p>I'm on Chrome/Firefox. I've read several tutorials and questions here too on this topic.</p>
  
  <p>I have a UL containing LI. I set the LIs to "display: inline;", but they won't. They're still vertical.</p>
  
  <p>What am I doing wrong?</p>
  
  <p>Thx.</p>
  
  <p>Here's my css:</p>
  
  <pre><code>  .menu{
      width: 100%;
      padding: 0px;
      margin: 0px;
      outline: 1px solid grey;
      background-color: #f6f6f6;
      font-size:100%;
  }
  
  .menu ul{
      float: left;
      list-style: none;
      margin: 0px;
      padding: 0px;
      background-color: #f6f6f6;
  }
  
  .menu li ul{
      display: none;
      height: auto;
      padding: 0px;
      margin: 0;
      background-color: #f6f6f6;
      outline: 1px solid gray;
      position: absolute;
      z-index: 200;
      left: 20px;
      top: 30%;
  }
  
  .menu li:hover ul{
      display: block;
  }
  
  .menu li:hover{
      background-color: #005ea2;
  }
  
  .menu li{
      display: inline;
      padding: 0;
      margin: 0;
      border-bottom: 1px dotted grey;
  }
  
  .menu ul li:last-child{
      border: none;
  }
  
  
  .menu a{
      display: block; 
      color: #333333;
      text-decoration: none;
      margin: 0px;
      margin-left: 5px;
  }
  
  .menu a:hover{
      color: white;
      background-color: #005ea2;
  }
  
  .menu .menu_header{
  
      color: #333333;
  }
  
  .menu .menu_header a:hover{
      color: white;
  }
  </code></pre>