水平CSS NAV顯示在IE7

http://www.sage-wellness.com/nav.html 水平CSS NAV顯示在IE7

我有在IE7-所有頂級導航與此一個問題，因爲垂直堆疊垂直而非水平。

這裏是CSS

#navigation { width:800px; height:27px; background-image:url(images/navbg.gif); background- repeat:no-repeat; margin-top:30px; } 
#navigation ul { margin:0px; padding:0px; font-family: Arial, Helvetica, sans-serif; font-size: 12px;line-height: 27px; display:inline; } 
#navigation ul li { display:inline; float:left; list-style:none; height:27px; line-height:27px; position:relative; } 
#navigation li a { color:#a1c301; text-decoration:none; padding-right:10px; padding-left:10px; } 
#navigation li a:hover, #navigation li:hover a { color:#fff; background-color: #91b000; display:inline-block; } 

#navigation li ul { margin:0px; padding:0px; display:none; position:absolute; left:0px; top:27px; background-color:#5b5b52;} 
#navigation li:hover ul { display:block; width:150px;} 
#navigation li li a { color:#a1c301; text-decoration:none; } 
#navigation li li a:hover, #navigation li li:hover a { color:#fff; background-color: #91b000; width:130px; display:inline-block;} 
#navigation li.top { } 
#navigation li.top a:hover { } 
#navigation ul.submenu { background-color:#5b5b52; } 
#navigation li.submenu { width:150px; border: 1px dotted #999; background-color:#5b5b52; } 
#navigation .submenu li a { background:#5b5b52; }

這裏是HTML

<div id="navigation"> 
<ul class="top"> 
<li class="top">&nbsp;&nbsp;&nbsp;&nbsp;</li> 
<li class="top"><a href="">Home</a></li> 
<li class="top"><a href="">Acupuncture</a></li> 
<li class="top"><a href="">Chinese Medicine</a> 
    <ul class="submenu"> 
     <li class="submenu"><a href="">Herbal Medicine</a></li> 
     <li class="submenu"><a href="">Other Modalities</a></li> 
    </ul> 
</li> 
<li class="top"><a href="">Conditions Treated</a></li> 
<li class="top"><a href="">About</a> 
<ul class="submenu"> 
     <li class="submenu"><a href="">Deb Valentin Bio</a></li> 
     <li class="submenu"><a href="">FAQs</a></li> 
     <li class="submenu"><a href="">Community Resources</a></li> 

    </ul> 
    </li> 
<li class="top"><a href="">Testimonials</a></li> 
<li class="top"><a href="">Blog</a></li> 
<li class="top"><a href="">Schedule an Appointment</a></li> 
</ul> 
</div>

來源

2011-10-20 user1005959

IE7不明白：懸停在比錨等元素，以及有沒有什麼線索顯示：內聯塊手段。檢查出一個解決方案的suckerfish下拉菜單http://www.htmldog.com/articles/suckerfish/dropdowns/

來源

2011-10-20 19:56:55 albert

有趣的是，我通過添加display：inline to #navigation li a來實現它。我不知道它爲什麼起作用，但它工作。 – user1005959

水平CSS NAV顯示在IE7

回答

相關問題