Question

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

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

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

添加更多你也可以尝试使用它代替上面的css，只需将它添加到你的CSS的底部

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

菜单栏使用css的子菜单

1 个答案: