【发布时间】：2013-11-25 05:35:40
【问题描述】：
我正在尝试创建一个纯 CSS 下拉菜单。稍后我将使用图像，但现在我有颜色占位符。它在 Chrome 和 Firefox 中完美运行。但是，在 IE(10) 和 Safari 中，我无法显示下拉菜单。
我尝试在 IE 中进行故障排除，发现我的一些 CSS 没有与我构建菜单的嵌套列表相关联。例如，
似乎没有 CSS 属性ul#menu li > ul li:hover span
即使我删除了“悬停”。到目前为止，我的修复都没有奏效，我试图避免彻底检修（尽管我已经考虑过），因为它完全符合我在其他两个浏览器中的要求。
我正在测试的网站可以在这里找到：www.nimbleforce.com/public/test
正常工作时（就像在 Chrome 和 FF 中一样），主菜单项在悬停时变为灰色。第一个和第四个菜单项有下拉菜单，它们在悬停时变为红色。在 IE 中，灰色悬停很好，但根本没有下拉菜单的迹象。在 Safari 中，它是相同的，除了我在悬停时确实获得了主菜单下方的指针，就好像下拉菜单在那里，但不可见。
我已经验证了我的代码，除了 IE 的不透明性黑客之外，一切都很干净。 （我什至尝试删除那些以查看它是否修复了它，但它没有。）
这是相关的 HTML：
<div id="navBox">
<ul id="menu">
<li id="bookshelf"><a href="#"><span></span></a>
<ul id="sub1">
<li id="author"><a href="#"><span></span></a></li><!--by author-->
<li id="series"><a href="#"><span></span></a></li><!--by series-->
<li id="genre"><a href="#"><span></span></a></li><!--by genre-->
<li id="line"><a href="#"><span></span></a></li><!--by line-->
</ul>
</li>
<li id="comingsoon"><a href="#"><span></span></a></li>
<li id="blog"><a href="#"><span></span></a></li>
<li id="submissions"><a href="#"><span></span></a>
<ul id="sub2">
<li id="special"><a href="#"><span></span></a></li><!--special lines-->
<li id="calls"><a href="#"><span></span></a></li><!--specific calls-->
</ul>
</li>
<li id="faq"><a href="#"><span></span></a></li>
</ul>
</div>
这是我的导航 CSS：
#navBox {
margin: 44px auto 0 51px;
height: 47px;
width: 1028px;
}
#bookshelf, #comingsoon, #blog, #submissions, #faq {
height: 47px;
position: absolute;
}
#menu, #sub1, #sub1 li {
position: relative;
}
#bookshelf, #bookshelf span {
background-color: yellow;
width: 184px;
}
#bookshelf {
margin-left: 49px;
}
#comingsoon, #comingsoon span {
background-color: green;
margin-left: 0;
width: 212px;
}
#blog, #blog span {
background-color: blue;
margin-left: 0;
width: 122px;
}
#submissions, #submissions span {
background-color: purple;
margin-left: 28px;
width: 207px;
}
#faq, #faq span {
background-color: red;
margin-left: 25px;
width: 149px;
}
#submissions span, #faq span {
margin-left: 0;
}
#bookshelf, #comingsoon, #blog, #submissions, #faq, #bookshelf a span, #comingsoon a span, #blog a span, #submissions a span, #faq a span {
cursor: pointer;
display: block;
float: left;
}
#bookshelf a span, #comingsoon a span, #blog a span, #submissions a span, #faq a span {
height: 100%;
opacity: 0;
filter:alpha(opacity=0); /* For IE8 and earlier */
transition: opacity 1s ease;
-moz-transition: opacity 1s ease;
-webkit-transition: opacity 1s ease;
}
#bookshelf a span {
background-color: gray;
}
#comingsoon a span {
background-color: gray;
}
#blog a span {
background-color: gray;
}
#submissions a span {
background-color: gray;
}
#faq a span {
background-color: gray;
}
#bookshelf a:hover span, #comingsoon a:hover span, #blog a:hover span, #submissions a:hover span, #faq a:hover span {
opacity: 1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
ul#menu li
{
position:relative;
list-style-type:none;
padding:0px;
}
#sub2 li {
margin-left: 0;
}
ul#menu li > ul span {
left:0;
display: none;
background-color: blue;
opacity: 1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
transition: background-color 1s ease;
-moz-transition: background-color 1s ease;
-webkit-transition: background-color 1s ease;
}
ul#menu li > ul li:hover span {
background-color: red;
}
ul#menu li > ul span#sub1 {
width: 184px;
}
ul#menu li > ul span#sub2 {
width: 207px;
}
ul#menu li:hover > ul span
{
display: block;
}
这是我第一次来这里，所以如果我做错了，请容忍我的菜鸟，让我知道。我会尝试立即修复它。感谢您能给我的任何帮助。
【问题讨论】：
标签： css internet-explorer safari hover