Question

我已经能够制作下拉菜单但是当我试图在其他电脑上查看它时，第二级别的文件被错放了，而不是在它的下面。所以我试着重新编码，但我迷路了。请帮忙。

这是我的html标记：

<div id="main-nav" class="menufont">
    <ul id="nav">
        <li><a href="index.html">ONE</a></li>
        <li class="sec">TWO
            <ul id="twosecond" class="leveltwo">
                <li>TWO A</li>
                <li>TWO B</li>
            </ul>
        </li>
        <li class="sec1">THREE
            <ul id="threesecond" class="leveltwo">
                <li>THREE A</li>
                <li>THREE B</li>
                <li>THREE C</li>
                <li>THREE D</li>
            </ul>
        </li>
        <li>FOUR</li>
        <li>FIVE</li>
    </ul>
</div>

这是我搞砸了的CSS：

ul.leveltwo {
    background: #c7000d;
    border: 1px solid black;
    padding: 7px;
    font: 16px Helvetica, Arial;
}

ul.leveltwo li {
    color: #fff;
}

#twosecond li, #threesecond li {
    font: 16px Arial;
    display:block;
    padding: 3px;
    border-bottom: 1px dashed #fff;
}

#twosecond, #threesecond {
    display: none;
    position: absolute;
}

#nav li.sec:hover ul, #nav li.sec1:hover ul {
    display: block;
}

带有.leveltwo类的ul显示当我将鼠标悬停在主要的li上但是“TWO”的ul不与它对齐。非常感谢。

Answer 1

只需将display:none添加到.leveltwo课程，然后取出#twosecond #threesecond代码即可。 `position：absolute使子菜单看起来像是在三下出现。

示例：http://jsfiddle.net/r4gAQ/3/

虽然我会说，我会研究一个jQuery解决方案，也许是像MLDDM这样的预制解决方案。他们有很好的解决方案，允许垂直和水平菜单。此外，在IE6中使用纯CSS中断鼠标......并不是任何人都应该使用它。

Answer 2

重新检查我的帖子。这可能是帮助你的CSS。试试吧！

#nav li{
    width:200px;
    position:relative;
    border: 1px solid black;
}

#nav li ul.leveltwo li{
    border:none;
}

#nav li ul{
    background: #c7000d;
    border: 1px solid black;
    padding: 7px;
    font: 16px Helvetica, Arial;
    color:white;
    position:absolute;
    left:200px;
    top:0;
    display:none;
}

#nav .sec:hover ul, #nav .sec1:hover ul{
    display:block;
}

迷失在CSS下拉菜单中

2 个答案: