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"> </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>
最佳答案
ie7 不理解 :hover 在 anchor 以外的元素上,也不知道 display:inline-block 是什么意思。查看 suckerfish 下拉菜单以获得解决方案 http://www.htmldog.com/articles/suckerfish/dropdowns/
关于css - 水平 CSS 导航在 IE7 中显示为垂直,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7841441/