Drop Down navi не работает, т.е. 7?

Question

У меня есть новое выпадающее меню navi в css.

Хром, firefox, сафари работает нормально, но IE7 не показывает ниспадающий список.

CSS

.cl{clear:both;} 
#navi{ 
    background:#0082c8; 
    position:relative; 
    margin-top:15px; 
} 
#navi:after{ 
    position:absolute; 
    content:""; 
    left:0; 
    right:0; 
    top:0; 
    height:5px; 
    background:#00a7ff; 
    border-top:1px solid #0285cb; 
    border-bottom:2px solid #0068a6; 
    box-shadow:inset 0 0 0 1px #26c6f8; 
} 

#navi:before{ 
    position:absolute; 
    content:""; 
    left:0; 
    right:0; 
    bottom:0; 
    height:5px; 
    background:#00a7ff; 
    border-top:1px solid #0285cb; 
    border-bottom:2px solid #0068a6; 
    box-shadow:inset 0 0 0 1px #26c6f8; 
} 


#navi > li{ 
    float:left; 
    margin:0 10px; 
    position:relative; 
    padding:14px 0; 
} 

#navi li a, .subnavi li a{ 
    color:white; 
    text-decoration:none; 
    display:inline-block; 
    line-height:29px; 
    padding:0 13px; 
    font-size:16px; 
    font-family:arial; 
    text-shadow: 0px 2px 2px #034e9f; 
    filter: dropshadow(color=#034e9f, offx=0, offy=2); 
} 

#navi > li:hover > a, li:hover > a , #navi li a.active{ 
    background:#055c9f; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    -webkit-box-shadow: inset 0px 3px 3px 0px #042960; 
    -moz-box-shadow: inset 0px 3px 3px 0px #042960; 
    box-shadow: inset 0px 3px 3px 0px #042960; 
    border:1px solid #009ada; 
    color:#f7cf00; 
    line-height:27px; 
    padding:0 12px;    
} 

.subnavi{ 
    position:absolute; 
    display:none; 
    top:51px; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    -webkit-box-shadow: 0px 0px 3px 1px #979395; 
    -moz-box-shadow: 0px 0px 3px 1px #979395; 
    box-shadow: 0px 0px 3px 1px #979395; 
    background:#0082c8; 
    border:1px solid #005890; 
    padding:10px 0; 
    white-space:nowrap; 
} 

#navi li:hover .subnavi{ 
    display:block; 

} 
#navi .subnavi li{ 
    margin:0; 
} 
#navi .subnavi li a{ 
    display:block; 
    font-size:13px; 
    padding:0 15px; 
    border-radius:0; 
    line-height:27px; 
} 
#navi .subnavi li a:hover{ 
    padding:0 15px; 
    border-radius:0; 
    border-left:0; 
    border-right:0; 
    line-height:25px; 
} 


​ 

HTML

<ul id="navi"> 
    <li><a href="" class="active">About</a></li> 
    <li><a href="">Services</a> 
     <ul class="subnavi"> 
      <li><a href="">Web Development</a></li> 
      <li><a href="">WordPress</a></li> 
      <li><a href="">Graphic Design</a></li> 
      <li><a href="">Icon Design</a></li> 
      <li><a href="">Motion Graphics</a></li>  
     </ul> 

    </li> 
    <li><a href="">Works</a></li> 

    <div class="cl"></div> 
</ul>​ 

Ссылка здесь http://jsfiddle.net/rohitazad/3qPbE/11/

Answer 1

Привет Это не ответ, но его просто мысли с моей стороны.

Применяется поплавок: левый; вы можете попробовать с дисплеем: inline-block; и добавить взломать для IE:

Zoom: 1;
* дисплей: встроенный;

Попробуйте только это. Если его работа Попробуйте в следующий раз вперед Disply: inline-block;