title: Hover Not Staying Long Enough
body: <p>The following code creates a NAV bar with hover lists.</p>
  
  <p>The hover works but I have to move my mouse quickly down the hover list to make sure it stays open on hover - ie it flashes off very quickly . Do I need to squeeze the top of the hover closer to the main NAV bar ? Any help much appreciated.</p>
  
  <pre><code>    /* Navigation Style */ 
      .dropdown { position:relative; font-family: arial, sans-serif; width:100%; height:40px; border:1px solid #666666; font-size:14px; color:#ffffff; background:#333333; z-index:2; } 
  
      /* Basic List Styling (First/Base Level) */ 
      .dropdown ul {padding:0; margin:0; list-style: none;} 
      .dropdown ul li {float:left; position:relative;} 
      .dropdown ul li a { border-right:1px solid #666666; padding:12px 8px 12px 8px; display:block; text-decoration:none; color:#000; text-align:center; color:#fff;} 
      .dropdown ul li a:hover {color:#ffffff; background:#232323;} 
  
      /* Second Level Drop Down Menu */ 
      .dropdown ul li ul {display: none;} 
      .dropdown ul li:hover ul { font-size:13px; display:block; position:absolute; top:41px; min-width:150px; left:0;} 
      .dropdown ul li:hover ul li a {display:block; background:#000; color:#ffffff; width:170px; } 
      .dropdown ul li:hover ul li a:hover {background:#666666; color:#ffffff;} 
  
      /* Third Level Drop Down Menu */ 
      .dropdown ul li:hover ul li ul {display: none;} 
      .dropdown ul li:hover ul li:hover ul { display:block; position:absolute; left:145px; top:0; } 
  </code></pre>
  
  <p>The actual NAV bar HTML is </p>
  
  <pre><code>  &lt;div class="dropdown"&gt; 
  &lt;ul&gt; 
   &lt;li&gt;&lt;a href="about.php"&gt;About&lt;/a&gt;&lt;/li&gt; 
   &lt;li&gt;&lt;a href="steam-railtours-all.php"&gt;Steam Rail Tours&lt;/a&gt; 
    &lt;ul&gt; 
     &lt;li&gt;&lt;a href="steam-railtours-all.php"&gt;All Rail Tours&lt;/a&gt;&lt;/li&gt; 
     &lt;li&gt;&lt;a href="vsoe-steam-railtours.php"&gt;British Pullman (VSOE)&lt;/a&gt;&lt;/li&gt; 
    &lt;/ul&gt; 
   &lt;/li&gt; 
  &lt;/ul&gt; 
    &lt;/div&gt; 
  </code></pre>