Question

有人可以帮我弄清楚如何在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;
}

Answer 1

如果您想要下拉菜单下拉列表，请不要将无序列表（ul）下的list-items（li）设置为“display：inline-block。这将并排显示列表项目。” / p>

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

.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的帮助

下拉菜单w / css

1 个答案: