вертикальное меню без проскальзывания

Question

На моем веб-сайте я использую вертикальное меню для выбора в разных категориях. Проблема в том, что у окон скольжения небольшое проскальзывание. Я хочу, чтобы зеркальное окно было полностью выровнено с меню. Вот код. Подъярус высок, поэтому они скрыты нижней частью внутреннего. Веб-сайт: http://www.ontario.dollarad.ca/publish_menu.php

<div id="nav_ver"> 
    <ul class="top-level"> 
     <li><a href="#">Social</a> 
      <ul class="sub-level"> 
       <li><a href="publish_end.php?classe=Social&sclasse=Dating">Dating</a></li> 
       <li><a href="#">Dancing,singing courses</a></li> 
       <li><a href="#">Hobbies</a></li> 
       <li><a href="#">Social meeting</a></li> 
     <li><a href="#">Mentoring</a></li> 
     <li><a href="#">Music courses</a></li> 
     <li><a href="#">Restaurants</a></li> 
     <li><a href="#">Others</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Pets</a> 
    <ul class="sub-level"> 
       <li><a href="">Dogs</a></li> 
       <li><a href="#">Cats</a></li> 
       <li><a href="#">Birds</a></li> 
       <li><a href="#">Reptiles</a></li> 
     <li><a href="#">Aquatic animals</a></li> 
     <li><a href="#">Insects</a></li> 
     <li><a href="#">Breeding farm</a></li> 
     <li><a href="#">Exotic pets</a></li> 
     <li><a href="#">Equipements</a></li> 
     <li><a href="#">Others</a></li> 
      </ul> 
    </li> 
    </ul> 
</div> 

Это CSS. Скажите, пожалуйста, что делать.

#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; 
} 

Большое спасибо.

Answer 1

Просто чтобы прояснить это то, что вам нужно:

Если это дайте мне знать, чтобы объяснить, как acomplish это.