title: CSS - Navigation bar drop down on hover
body: <p>I have a drop down menu for a navigation bar which you can view:-</p>
  
  <p><a href="http://jsfiddle.net/pHyqh/" rel="nofollow">http://jsfiddle.net/pHyqh/</a></p>
  
  <p>The problem is, when you hover over 'Online Booking' is pushes the 'Contact Us' link to the right because the width of the drop down menu is quite large.</p>
  
  <p>I can't figure out how I can prevent this from happening whilst keeping the positioning the same.</p>
  
  <p>Any help would be much appreciated!</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;nav id="main-toplink"&gt;
  &lt;ul class="topnav"&gt;
      &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;
  
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Services&lt;/a&gt;
  
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Airport Transfers&lt;/a&gt;
  
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Accounts&lt;/a&gt;
  
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Online Booking&lt;/a&gt;
  
          &lt;ul class="dropdown"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Cash Booking&lt;/a&gt;
  
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Account Booking&lt;/a&gt;
  
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Credit Card Booking&lt;/a&gt;
  
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;
  
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#main-toplink ul a {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 14px;
      color: #e5e5e5;
  }
  
  nav ul ul {
      display: none;
  }
  
  nav ul {
      display: inline-table;
      list-style: none outside none;
      padding: 0 0;
      position: relative;
      z-index: 500;
  }
  
  .dropdown li:before {
      color: #FFF; 
      content: '►'; 
      position: absolute;
      font-size: 12px; 
      font-family: Arial;
      top: 10px;
      margin-left: 8px;
  }
  
  nav ul:after {
      clear: both;
      content: "";
      display: block;
  }
  
  nav ul li {
      float: left;
  }
  
  nav ul li a {
      color: #757575;
      display: block;
      padding: 0px 22px 9px 20px;
      text-decoration: none;
  }
  
  nav ul ul {
      background: none repeat scroll 0 0 #222;
      padding: 0;
      position: relative;
      top: 100%;
      zoom: 1;
      filter: alpha(opacity=95);
      opacity: 0.95;
  }
  nav ul ul li {
      float: none;
      position: relative;
  }
  nav ul ul li a {
      color: #FFFFFF !important;
      padding: 10px 10px 10px 30px;
  }
  nav ul ul li a:hover {
      background: none repeat scroll 0 0 #4B545F;
  }
  nav ul ul ul {
      left: 100%;
      position: absolute;
      top: 0;
  }
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$(document).ready(function(){
  
      $("#main-toplink li").hover(function(){
  
          $(this).children("ul").slideDown(300); 
  
      },function(){
  
       $(this).children("ul").slideUp(300);
  
      });
  
  });
  </code></pre>