Internet explorer 嵌套列表在IE中未正确显示

我有一个基于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>

但是，在IE中，浏览器将嵌套的

视为另一个

，并将其浮动到前面的项目旁边：

您可以看到subnav元素的位置和样式（某种程度上）是正确的，但是嵌套不应该是它自己的按钮。我尝试添加了一个

clear:both属性添加到
#cv nav ul li ul
元素，但无效

这一定是我忽略的简单的事情。感谢您的帮助

这是一把小提琴：

ty
我发现了这个问题：

客户希望整个
元素是可点击的，而不仅仅是标签。对于没有嵌套列表的元素，它可以正常工作。但是，对于那些在一个
元素中包含所有元素的元素，IE会感到困惑

移动
以包围标签解决了问题

#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;
}​