title: how to change a vertical css menu to be horizontal
body: <p>im using this css for my vertical menu:</p>
  
  <pre><code>.vertical-nav{
      width:200px;
      height:auto;
      list-style:none;
      float:left;
      margin-right:40px;
  }
  .vertical-nav li{
      width:200px;
      height:25px;
      margin:5px;
      padding:5px;
      background-color:#666666;
      border:none;
      text-align:center;
      float:left;
  }
  .vertical-nav li:hover{
      background-color:#f36f25;
      color:#FFFFFF;
  }
  .vertical-nav li a{
      font-family:Calibri, Arial;
      font-size:18px;
      font-weight:bold;
      color:#ffffff;
      text-decoration:none;
  }
  .vertical-nav li.current {
      background-color:#F36F25;
  }
  .vertical-nav li.current a {
      color:#FFFFFF;
  }
  </code></pre>
  
  <p>and here is my html:</p>
  
  <pre><code>&lt;ul class="vertical-nav"&gt;
  &lt;li&gt;&lt;a href="index.php"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="staff.php"&gt;Staff&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="invoices.php"&gt;Invoices&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="tickets.php"&gt;Tickets&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="openticket.php"&gt;Open Ticket&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>what would be the best way to make the links display horizontal?</p>