带有 css 的下拉菜单

debugcn 发表于 Dev

帕特里克·列侬

有人可以帮我弄清楚如何在 css 中设置此代码的样式以显示下拉菜单吗？这是我到目前为止所得到的，但我不知道之后该怎么做。感谢您的帮助，谢谢。

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="">Programs</a></li>
            <ul class="drop-down-menu">
                <li><a href="">Personal Trainer</a></li>
                <li><a href="">Group Workout</a></li>
                <li><a href="">Pricing</a></li>
            </ul>
        <li><a href="">About</a></li>
        <li><a href="">Contact</a></li>
    </ul>
</nav>


nav{
    position: fixed;
    z-index: 6;
    list-style-type: none;
    word-spacing: 30px;
    font-family: 'karla', sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    background-color: rgba(0,0,0,0.62);

nav a{
    color: #F4F4F4;
}
ul li{
    display: inline-block;
}
.drop-down-menu{
    display: none;
}

戴尔

如果您希望下拉菜单下拉，请不要将无序列表 (ul) 下的列表项 (li) 设置为“display: inline-block。这将并排显示列表项。

同样对于您的下拉框，您还必须说明边框（如果需要）、填充、边距等。

.drop-down-menu{
    display: none;
    position: absolute;
    background-color: #yourcolor;
    width: 100px;
    margin-left: (how many pixels between the dropdown and your page
     ^ Best to add this only if position is absolute
    text-align: center;
    padding: 10px;

}

如果您需要有关 javascript 的帮助，请说明

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。