CSS 下拉 DIV 菜单...为什么我的链接会破坏它？

Question

好的，我正在构建一个类似于 ESPN 网站上的 CSS 下拉菜单。一切都很顺利，但是当我将链接放入下拉 div 时，它会中断。在 Firefox 中，下拉 div 现在将不再出现，在资源管理器中它会出现，但列表中包含链接的所有元素都会消失。有什么想法/建议吗？

顺便说一句，我是新来的……一直在寻找有关 stackoverflow 的修复程序，但直到现在才真正自己问过问题。提前致谢！

这是 HTML，请注意列表中的一个链接。没有 subnav div 中的任何链接，一切都很完美。链接断开。

    <ul id="topnav">
    <li><a class="top" href="#">
        <div class="button">Home</div>
        </a>
    </li>
    <li><a class="top" href="#">
        <div class="button">Programs</div>
        <div class="subnav">
            <ul class="mainlinks">
                <li><a href="#">Recreational</a></li>
                <li>TESTING</li>
                <li>TESTING</li>
                <li>TESTING</li>
                <li>TESTING</li>
            </ul>
        </div>
        </a>
    </li>
</ul>

这是 CSS：

#topnav {
width: 800px; height: 30px;
margin: 0 auto; padding: 0 0 0 160px;
list-style: none;
}
#topnav li {
position: relative;
}
#topnav li a.top {
color: #FFFFFF;
font-size: 0.75em;
font-weight: bold;
text-decoration: none;
}
#topnav li a.top .button {
position: relative;
z-index: 998;
display: inline;
float: left;
height: 18px;
padding: 6px 30px;
}
#topnav li a.top:hover {}
#topnav li a.top:hover .button {
color: #000000;
background-color: #FFFFFF;
-moz-box-shadow: 0 0 10px -1px #000000;
-webkit-box-shadow: 0 0 10px -1px #000000;
box-shadow: 0 0 10px -1px #000000;
}
#topnav li .subnav {
display: none;
position: absolute;
z-index: 999;
width: 960px;
top: 30px; left: -160px;
background-color: #FFFFFF;
color: #000000;
border-bottom: solid 5px #990000;
}
#topnav li a.top:hover .subnav {
display: block;
}
#topnav li .subnav ul.mainlinks {
width: 150px;
list-style: none;
padding: 20px;
}

我认为这可能与 topnav 中的主要链接有关，因此我向它们添加了“top”类，但这并没有帮助。最初我只是将它嵌套在

#topnav li a .subnav

Answer 1

我认为这不是问题，但我能看到的第一件事是您的子菜单有一个锚标记围绕两个 div

<li><a class="top" href="#">
    <div class="button">Programs</div>
    <div class="subnav">
        <ul class="mainlinks">
            <li><a href="#">Recreational</a></li>
            <li>TESTING</li>
            <li>TESTING</li>
            <li>TESTING</li>
            <li>TESTING</li>
        </ul>
    </div>
    </a>
</li>

<li><a class="top" href="#">
    <div class="button">Programs</div>
    </a> ***************************** MOVED CLOSING TAG HERE
    <div class="subnav">
        <ul class="mainlinks">
            <li><a href="#">Recreational</a></li>
            <li>TESTING</li>
            <li>TESTING</li>
            <li>TESTING</li>
            <li>TESTING</li>
        </ul>
    </div>
</li>

就问题而言，我会说仔细检查a 的所有样式并确认没有任何冲突。