水平 CSS 导航在 IE7 中显示为垂直

Question

http://www.sage-wellness.com/nav.html

我正在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>

Answer 1

ie7 不理解 :hover 在锚点以外的元素上，也不知道 display:inline-block 的含义。查看 suckerfish 下拉菜单以获取解决方案 http://www.htmldog.com/articles/suckerfish/dropdowns /