【发布时间】：2013-05-21 10:19:30
【问题描述】：
您好，我刚刚重新设计了我的网站以包含下拉菜单，但我今天了解到 IE 8 及更低版本无法正确显示它们。据我所知，它在所有其他浏览器上都显示得很好。 不知道哪里出错了，一直在调试，一直没搞清楚。
任何帮助将不胜感激！
这是一个带有我的 html 和 css 的 jsfiddle：http://jsfiddle.net/scTqy/
这是直播网站的链接：http://www.hearditfrom.com
（这是在 js fiddle）
这是我的 html/php:
<nav id="hb2_nav">
<ul>
<li><a class="hb2_nav" href="category.php">Categories <span class="arrow-down"></span></a>
<ul class="drop-shadow">
<span class="category_column">
<li><a href="category.php?category=1">U.S.</a></li>
<li><a href="category.php?category=2">World</a></li>
<li><a href="category.php?category=3">Business</a></li>
<li><a href="category.php?category=4">Economy</a></li>
<li><a href="category.php?category=5">Entertainment</a></li>
</span>
<span class="category_column">
<li><a href="category.php?category=6">Health</a></li>
<li><a href="category.php?category=7">History</a></li>
<li><a href="category.php?category=8">Odd News</a></li>
<li><a href="category.php?category=9">Politics</a></li>
<li><a href="category.php?category=10">Science</a></li>
</span>
<span class="category_column_last">
<li><a href="category.php?category=11">Special Reports</a></li>
<li><a href="category.php?category=12">Sports</a></li>
<li><a href="category.php?category=13">Technology</a></li>
</span>
</ul></li>
<li><a class="hb2_nav" href="">Add </a></li>
<li><a class="hb2_nav" href="">Edit </a></li>
</ul>
</nav>
这是我的 CSS：
#hb2_nav
{
font-size:18px;
line-height: 55px;
float:right;
height:55px;
margin:0px;
margin-top:0px;
padding:0px;
display:inline;
}
#hb2_nav ul ul {
display: none;
color: #333;
}
#hb2_nav ul li:hover ul {
display: block;
}
#hb2_nav ul {
list-style: none;
position: relative;
display: inline-table;
}
#hb2_nav ul:after {
content: ""; clear: both; display: block;
}
#hb2_nav ul li {
float: left;
}
#hb2_nav ul li:hover {
background: none;
}
#hb2_nav ul li:hover a {
text-decoration:none;
padding-left: 10px;
padding-right:10px;
}
#hb2_nav ul li a {
text-decoration:none;
display: block; /*padding: 25px 40px;
color: #757575; text-decoration: none;*/
}
#hb2_nav ul ul {
background: #ffffff; /*#FFF8F0;*/
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
width:100%;
min-width:250px;
max-width: 400px;
z-index:10000;
border: 2px solid #999;
}
#hb2_nav ul ul:before {
content:"";
display:block;
width:0;
border:15px solid #999;
border-color:transparent transparent #999 transparent;
position:absolute;
bottom:100%;
left:20px;
margin-left:-10px;
}
#hb2_nav ul ul li {
float: none;
background: #ffffff;
width: 100%;
position: relative;
text-align:left;
font-size: 14px;
line-height: 24px;
}
#hb2_nav ul ul li a {
color: #333;
padding: 10px 20px;
}
#hb2_nav ul ul li:hover a {
background: #e8e8e8;
}
【问题讨论】：
-
只是说...你进入php只是为了回显html？不得不对那个说NOOOOOOOOO...只是说。
-
我刚刚将 nav 标签更改为 div 标签，这使它可以在 IE 8 上运行，但在 IE 7 上，下拉菜单仍然奇怪地显示。我还拿出了一些我需要 php 的东西，对此感到抱歉
-
在旧版浏览器中添加 html5 标签见这篇文章：stackoverflow.com/questions/12996413/html5-for-ie8-or-less
-
知道为什么它可能无法在 IE 7 上使用 div 标签吗？
-
除了 ie7 是一个火爆的 POS 之外，它可能不喜欢 li 嵌套在 span 标签中，除非这些 span 标签被设置为显示块。但是，我严重怀疑这应该归咎于我在检查您的网站时遇到的行为。也许问题在于您如何定义菜单相对于其父项的位置。微妙的旁注，当您将鼠标悬停在类别菜单的底部项目上时，您会遇到一些古怪的行为。它将内容直接从屏幕上推出
标签： html internet-explorer css drop-down-menu