title: CSS: Convert vertical menu to horizontal
body: <p>How to convert the vertical menu into horizontal? Which lines in the below-given code are responsible for this?</p>
  
  <pre><code>ul#vertmenu {
      list-style: none outside none;
      margin: 0;
      padding: 0;
      width: 200px;
  }
  ul#vertmenu li {
      background: none repeat scroll 0 0 #FFFFFF;
      border-bottom: 1px solid #FFFFFF;
      float: left;
      font: bold 11px/16px arial,helvetica,sans-serif;
      position: relative;
      width: 100%;
  }
  ul#vertmenu li ul li {
      background: none repeat scroll 0 0 #FFCF8B;
  }
  ul#vertmenu li a {
      display: block;
      padding: 2px 3px;
  }
  ul#vertmenu li a:hover {
      background: none repeat scroll 0 0 #FFCF8B;
      border-left: 1px solid #FFFFFF;
      border-right: 1px solid #FFFFFF;
      color: #AA0000;
  }
  ul#vertmenu li ul li a:hover {
      background: none repeat scroll 0 0 #FFEDD3;
      border-left: 1px solid #FFFFFF;
  }
  ul#vertmenu ul {
      display: none;
      position: absolute;
      top: 0;
  }
  ul#vertmenu li:hover ul {
      display: block;
      left: 200px;
  }
  </code></pre>
  
  <p>I found the answer <a href="http://www.dynamicdrive.com/forums/archive/index.php/t-30960.html" rel="nofollow">here</a>. Exactly what I wanted to know:</p>
  
  <p>"First, take out all the mentions of a "width". You're going to want your menu to span your page not be restricted to the 180px in the current version.</p>
  
  <p>Next, we need to tell the <li> elements to lay in-line with each other, instead of stack top to bottom. So, add display:inline to #vertmenu li.</p>
  
  <p>After that, we'll need to tell the elements to follow suit. So, remove display:block from the #vertmenu li a decleration. "</p>