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的不透明黑客外，它们都很干净。（我甚至尝试删除它们，看它是否修复了它但它没有。）

以下是相关的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？如果你将不透明度设置为完整

，我不明白为什么你会想要那里

Answer 2

问题结果是跨度中没有任何东西的组合（因此它们没有高度）和我正在使用的doctype。我在跨度中添加了<br/>s并看到了进度，但IE仍然无法播放。我后来求助于找到一个在IE中工作的下拉菜单，然后逐行查看差异的位置。碰巧的是，我使用的是HTML 5，但使用的是过渡4.0 doctype。我改变了，菜单工作得很好。

感谢@MitchDart指出我正确的方向。你非常乐于助人。

在IE和Safari中下载CSS问题

2 个答案: