html - 使用CSS的带有子菜单的菜单栏

Question

我正在尝试使用 CSS 实现带有子菜单的菜单栏。

演示 http://jsfiddle.net/kgu/skg3ctu5/

HTML

<div class="menu">
    <ul id="navmenu">
        <li><a href="#"> Item1 </a></li>
        <li><a href="#"> Item2 </a></li>
        <li>
            <a href="#"> Item3 </a>
            <ul class="sub1">
                <li><a href="#"> Item3.1 </a></li>
                <li>
                    <a href="#"> Item3.2 </a>
                    <ul class="sub2">
                        <li><a href="#"> Item3.2.1 </a></li>
                        <li><a href="#"> Item3.2.2 </a></li>
                        <li><a href="#"> Item3.2.3 </a></li>
                    </ul>
                </li>
                <li><a href="#"> Item3.3 </a></li>
            </ul>
        </li>
        <li><a href="#"> Item4 </a></li>
    </ul>
</div>

CSS

* {
    margin:0px;
    padding:0px;
}
body {
    padding:50px;
    font-family:verdana;
    background-color:#000000;
}
#navmenu li {
    list-style-type:none;
}
#navmenu li {
    outline:1px solid red;
    width:125px;
    text-align:center;
    position:relative;
    float:left;
}
.sub1 {
    position:absolute;
    top:27px;
    left:0px;
}
.sub2 {
    position:absolute;
    left:126px;
    top:0px;
}
#navmenu a {
    display:block;
    height:25px;
    background-color:#ffffff;
    text-decoration:none;
}

我希望我的(子菜单 1).sub1 水平显示在导航菜单下方。将鼠标悬停在元素 3 上时，子菜单项 3.1 应出现在元素 1 下方，元素 3.2 应出现在元素 2 下方，元素 3.3 应出现在元素 3 下方。

有人能帮忙吗？谢谢!

Answer 1

这是一个完整的 CSS 解决方案。将您的部分 css 更改为此:

 *{
        margin:0px;
        padding:0px;
    }

    body{

        padding:50px;
        font-family:verdana;
        background-color:#000000;
    }




    #navmenu li{
        list-style-type:none;
    }

    #navmenu li{
        outline:1px solid red;
        width:125px;
        text-align:center;
        position:relative;
        float:left;

    }
    .sub1{
        position:absolute;
        top:27px;
        left:0px;
        display:none;

    }
    .sub1:hover, .sub1:focus {
        display:block;
    }

    .sub2:hover, .sub2:focus {
        display:block;
    }


    .sub2{
        position:absolute;
        left:126px;
        top:0px;
        display:none;
    }

    #navmenu a{

        display:block;
        height:25px;
        background-color:#ffffff;
        text-decoration:none;

    }

   #navmenu a:hover + .sub1{
        display:block;
    }

     #navmenu a:hover + .sub2{
        display:block;
    }

我给你的子菜单类显示:无。然后，如果您悬停或聚焦它们，它们将显示，这与我制作的底部 2 个新选择器样式一起使用，它们检查悬停显示上的 .sub1 或 sub2 旁边是否有标签阻止它们。所有这些组件一起允许下拉工作。如果需要，您可以在悬停和聚焦时使用 css 动画进行动画处理。请注意我使用的新选择器“+”，它允许您选择 sibling (彼此相邻的元素)。

添加更多你也可以尝试使用这个而不是上面的 css 只需将它添加到你的 css 的底部

ul#navmenu li:hover > ul {
     display:block;
}