Многоуровневое выпадающее меню на CSS

[MIB]

День добрый.

Пытаюсь создать многоуровневое выпадающее меню. Пока, все устраивало. Но в IE 9 (другого нет, подскажите, где взять сборку версий без установки - буду благодарен), появились непонятные отступы. Почитал кучу статей, пробовал разные меню, но они не совсем подходят. Помогите, пожалуйста.

Пример здесь Меню

[Radiocity]

В IE9 есть приятный инструментарий. Достаточно нажать клавишу F12

Вот меню, которое использую:

.vmenu ul a {
     /*font-weight:bold;*/
     float:left;
   display: block;
   cursor: pointer;
     /*text-transform:uppercase;*/
     color:#069;
     text-decoration:none;
   overflow: hidden; 
   }

.vmenu ul a span{
background: #f0f0f0;
   }

.vmenu ul a:hover span{
background: #b91c19;
     color:#fff;
   }

.vmenu ul li a {
    display:block;
  width:190px; /*185*/
    }   

.vmenu ul li a span{
  display:block;
  padding:7px 14px;
}

.vmenu ul li li a{
  margin:4px;
    }   

.vmenu ul li.menuparent li a span,
.vmenu ul li li.menuparent li a span,
.vmenu ul li li li.menuparent li a span,
.vmenu ul li li li li.menuparent li a span,
.vmenu ul li li li li li.menuparent li a span{
  background-image:none;
  color:#069;
}

.vmenu ul li.menuparent li a:hover span,
.vmenu ul li li.menuparent li a:hover span,
.vmenu ul li li li.menuparent li a:hover span,
.vmenu ul li li li li.menuparent li a:hover span,
.vmenu ul li li li li li.menuparent li a:hover span{
  background-image:none;
  z-index:100;
  color: #fff;
}

.vmenu ul li.menuparent a span,
.vmenu ul li li.menuparent a span,
.vmenu ul li li li.menuparent a span,
.vmenu ul li li li li.menuparent a span,
.vmenu ul li li li li li.menuparent a span{
  background:url('s5_menu_parent0.gif') no-repeat center right #f0f0f0;
  color:#069;
}

.vmenu ul li.menuparent a:hover span,
.vmenu ul li li.menuparent a:hover span,
.vmenu ul li li li.menuparent a:hover span,
.vmenu ul li li li li.menuparent a:hover span,
.vmenu ul li li li li li.menuparent a:hover span{
  background: #b91c19 url('s5_menu_parent2.gif') no-repeat center right;
  color: #fff;
}

.vmenu ul li ul li a {
    line-height: 16px;
    text-transform:none;
    background:none;
}

.vmenu li li a{
    background: none;
    padding: 0;
}


.vmenu, .vmenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}


.vmenu ul ul a {
    display: block;
    text-decoration: none;
    width: 175px;
    text-transform: none;
    margin: 4px;
}

.vmenu li {
    float:left;
    padding: 0;
}

.vmenu ul li {
    position: relative;
}

.vmenu li ul {
    z-index: 3;
    top: 0px;
    position: absolute;
    left: -999em;
    height: auto;
    width: 183px;
    border-width: 0;
    margin: 0;
    padding: 0;
}

.vmenu ul {
    padding: 0;
    margin: 0;
}

.vmenu li li {
    padding: 0;
    width: 183px;
}

.vmenu li ul ul {
    margin: 0px 0 0px 186px;
}

.vmenu li:hover ul ul, 
.vmenu li:hover ul ul ul,
.vmenu li:hover ul ul ul ul,  
.vmenu li.sfhover ul ul, 
.vmenu li.sfhover ul ul ul, 
.vmenu li.sfhover ul ul ul ul {
    position:absolute;
    left: -999em;
    z-index:2;
}

.vmenu li:hover ul, 
.vmenu li li:hover ul, 
.vmenu li li li:hover ul, 
.vmenu li li li li:hover ul,
.vmenu li.sfhover ul, 
.vmenu li li.sfhover ul, 
.vmenu li li li.sfhover ul,
.vmenu li li li li.sfhover ul{
    position:absolute;
    z-index: 2;
    left:0px;
}

.vmenu ul ul {  
    border: 0px; 
  background: #f2f2f2;
  border:1px solid #e1e1e1;
}

.vmenu li:hover ul, .vmenu li.sfhover ul {
    left: 0;
}


.vmenu li:hover ul {
  left:186px;
  top:0px;
    }

.vmenu ul li:hover ul span {
    background: none;
    }

.vmenu .submenutop, .vmenu .submenubottom{
display:none;
}

<div id="left">
  <div class="vmenu">     
    <div>              
      <ul>
          <li class="menuparent"><span><span><a alt="О компании" href="#"><span>О компании</span></a></span></span>
              <ul><!— Подменю -->
              <li class="submenutop"><a></a></li>
              <li><span><span><a alt="Менеджмент" href="#"><span>Менеджмент</span></a></span></span></li>
              <li><span><span><a alt="Награды и дипломы" href="#"><span>Награды и дипломы</span></a></span></span></li>
              <li class="submenubottom"><a></a></li>
              </ul>
          </li>
      <li class="current"><span><span><a alt="Новости" href="#"><span>Новости</span></a></span></span></li>
      </ul>
    </div>     
  </div>
</div>

.current - текущий пункт меню

.menuparent - пункт, содержащий подменю

Куча span, .submenubottom, .submenutop нужны для графического оформления меню, но в приведенном примере они использованы по минимуму.

Есть одна проблема с Opera10, а так работает прекрасно.

Edited August 20, 2011 by Radiocity