Question

好的，我正在构建一个类似于ESPN网站上的CSS下拉菜单。一切都很顺利，但当我把一个链接放入下拉列表时，它会中断。在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中的主要链接有关，所以我向他们添加了“顶级”类，但这没有帮助。最初我只是把它与

嵌套了

#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的所有样式，并确认没有任何可能发生冲突的内容。

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

1 个答案: