Question

我有一个基于CSS的导航元素，它会删除子类别，然后在下面水平运行它们。像这样：

navigation screenshot

当用户将鼠标悬停在主要项目上时，它会显示银色背景，当用户将鼠标悬停在子项目上时，它会变为琥珀色。它也会在活动页面上以这种方式显示。

该列表以典型方式构建：

<div id="cv-nav">
    <ul>
        <a href="#"><li>Item 1</li></a>
        <a href="#"><li>Item2
            <ul>
                <li><a href="#">Item 2a</a></li>
                <li><a href="#">Item 2b</a></li>
            </ul>
        </li></a>
        <a href="#"><li>Item 3</li></a>
        <ahref="#"><li>Item 4
            <ul>
                <li><a href="#">Item 4a</a></li>
                <li><a href="#">Item 4b</a></li>
            </ul>
        </li></a>
        <a href="#"><li>Item 5</li></a>
    </ul>
</div>

CSS使一切正常运行：

#cv-nav {
    background-image: url("nav-background");
    background-position: left top;
    background-repeat: no-repeat;
    height: 50px;
    position: absolute;
    top: 165px;
    width: 1024px;
}
#cv-nav ul {
    height: 50px;
    position: relative;
    width: 1024px;
}
#cv-nav ul li {
    float: left;
    height: 50px;
    margin: 0 1px;
    padding: 0;
    text-align: center;
}
#cv-nav ul a li, #cv-nav ul li a {
    color: #D0D2D2;
    text-transform: uppercase;
    font-family: "Helvetica Neue Black Italic",Helvetica,sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
    line-height: 50px;
}
#cv-nav ul li:hover ul li a {
    color: #D0D2D2;
    font-family: "Helvetica Neue Black Italic",Helvetica,sans-serif;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
    line-height: 30px;
}
#cv-nav ul li:hover, #cv-nav ul a li:hover, #cv-nav ul li.active {
    background-image: url("silver-button");
    background-position: left top;
    background-repeat: repeat-x;
}
#cv-nav ul li ul li:hover {
    background: none;
}

#cv-nav ul li:hover a, #cv-nav ul a li:hover, #cv-nav ul li:hover p, #cv-nav ul li.active a, #cv-nav ul a li.active, #cv-nav ul li.active p {
    color: #4f4f51;
    font-family: "Helvetica Neue Black Italic",Helvetica,sans-serif;
    text-transform: uppercase;

}

#cv-nav ul li ul li a:hover, #cv-nav ul li ul.active li a:hover, #cv-nav ul li ul.active li.active, #cv-nav ul li ul.active li.active a  {
    color: #FAB631;
    font-family: "Helvetica Neue Black Italic",Helvetica,sans-serif;
    text-transform: uppercase;
    background:none;
}

#cv-nav ul li ul {
    display: none;
    clear: both;
}

#cv-nav ul li:hover ul, #cv-nav ul li.hover ul, #cv-nav ul li ul.active {
    display: inline;
    height: 30px;
    left: 0;
    margin: 0;
    padding: 0 0 0 40px;
    position: absolute;
    top: 50px;
    width: 984px;
    background-image: url("subnav-background");
    background-position: left top;
    background-repeat: repeat-x;
}
#cv-nav ul li ul li{
    position:relative;
    float:left;
}

#cv-nav ul li ul li, #cv-nav ul li ul li a, #cv-nav ul li ul.active li, #cv-nav ul li ul.active li a {
    color: #D0D2D2;
    float: left;
    font-family: "Helvetica Neue Black Italic",Helvetica,sans-serif;
    font-size: 12px;
    height: 30px;
    letter-spacing: 0.1em;
    margin: 0;
    padding: 0px 10px 0 0;
    text-transform: uppercase;
    line-height: 30px;
}

然而，在IE中，浏览器将嵌套的<ul>视为另一个<li>，并将其浮动在前一项的旁边：

Nav in IE

您可以看到subnav元素的放置和样式是（有点）正确，但是嵌套<ul>不应该是它自己的按钮。我尝试在clear:both;元素中添加#cv-nav ul li ul属性，但无济于事。

这一点很简单，我忽略了。任何帮助表示赞赏。

这是一个小提琴：http://jsfiddle.net/tylonius/AD7VL/

TY

Answer 1

我发现了这个问题：

客户希望整个<li>元素可以点击，而不仅仅是标签。对于其中没有嵌套列表的元素，它工作正常。然而，对于那些做过的人来说，将它们全部放在单个<a>元素中会使IE混淆。

移动<a>以围绕标签解决了问题。

嵌套列表在IE中无法正确显示

1 个答案: