0

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

导航截图

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

该列表以典型的方式构建：

<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>的 s 视为另一个<li>，并将其浮动在前一项旁边：

IE中的导航

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

这必须是我忽略的简单事情。任何帮助表示赞赏。

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

泰

4

1 回答 1

0

我发现了这个问题：

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

将 移动<a>到标签周围解决了这个问题。

于 2012-10-10T17:30:49.600 回答