title: vertical menu with no slippage
body: <p>On my website I use vertical menu to make choice on different categories. The problem is that the slidding windows has a small slippage. I want the slidding window to be completly aligned with the menu. Here is the code. The sublevel are tall so they are hided by the bottom of the inner. The web site is <a href="http://www.ontario.dollarad.ca/publish_menu.php" rel="nofollow">http://www.ontario.dollarad.ca/publish_menu.php</a></p>
  
  <pre><code>&lt;div id="nav_ver"&gt;
      &lt;ul class="top-level"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Social&lt;/a&gt;
              &lt;ul class="sub-level"&gt;
                  &lt;li&gt;&lt;a href="publish_end.php?classe=Social&amp;sclasse=Dating"&gt;Dating&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Dancing,singing courses&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Hobbies&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Social meeting&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Mentoring&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Music courses&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Restaurants&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Others&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Pets&lt;/a&gt;
      &lt;ul class="sub-level"&gt;
                  &lt;li&gt;&lt;a href=""&gt;Dogs&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Cats&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Birds&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Reptiles&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Aquatic animals&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Insects&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Breeding farm&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Exotic pets&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Equipements&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Others&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
      &lt;/li&gt;
      &lt;/ul&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>Here is the CSS. Please tell me what to do that works.</p>
  
  <pre><code>#nav_ver {font-size:0.75em; width:150px;}
  #nav_ver ul {margin:0px; padding:0px;}
  #nav_ver li {list-style: none;} 
  
  ul.top-level {background:black;}
  ul.top-level li {
   border: #FF0000 solid; 
   border-width: 1px;
  }
   #nav_ver ul.sub-level {border:1px solid yellow;}
   #nav_ver a {
   cursor: pointer;
   display:block;
   height:25px;
   line-height: 25px;
   text-indent: 10px;
      color:red;
   text-decoration:none;
   width:100%;
  z-index:400;
  }
  #nav_ver a:hover{
      color:red;
   text-decoration:underline;
  }
  
  #nav_ver li:hover {
   background: black;
   position: relative;
   z-index:400;
  }
  ul.sub-level {
      display: none;  
      z-index:400;
  }
  li:hover .sub-level {
      background: black;
      border: #fff solid;
      border-width: 1px;
      display: block;
      position: absolute;
      left: 150px;
      top: 0px;
      z-index:400;
  }
  ul.sub-level li {
      border: none;
      float:left;
      width:150px; 
     z-index:400;
  }
  
  #nav_ver .sub-level {
      background: black;
      z-index:400;
  }
  </code></pre>
  
  <p>Thanks a lot.</p>