css - IE 和 Safari 中的 CSS 下拉问题

Question

我正在尝试创建一个纯 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 的不透明 hack 之外，一切都很干净。 (我什至尝试删除它们以查看它是否修复了它，但没有。)

这是相关的 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;
}

这是我第一次来这里，所以如果我做错了，请容忍我的菜鸟并让我知道。我会立即修复它。感谢您能给我的任何帮助。

Answer 1

你试过删除

display: none;

里面

ul#menu li > ul span 

CSS?如果您将不透明度设置为完全，我不明白您为什么要在那里