Question

我是HTML和CSS的新手，并试图制作一个有关天文学的随机网站。而且我不知道我的下拉菜单不起作用。我在Google上搜索了很多，看了很多youtube视频，但仍然找不到解决方案。当我将CSS子菜单中的显示更改为block时，它将显示子菜单，但以水平线显示。我应该重写整个代码还是可以编辑？我是新的HTML和CSS，因此请原谅我的错误和知识不足。谢谢。

false

Answer 1

这是因为您必须将子菜单放在父<li>内。

这是工作中的Codepen。

*{
    margin: 0;
    padding: 0;
    font-family: Century Gothic;
}

header{
    background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(../1.jpg);
    height: 100vh;
    background-size: cover;
    background-position: center;
}

ul{
    float: right;
    list-style-type: none;
    margin-top: 20px;
}

ul li{
    display: inline-block;
}

ul li.active a{
    background-color: #fff;
    color: #000;
}

ul li a{
    text-decoration: none;
    color: #fff;
    padding: 5px 20px;
    border: 1px solid transparent;
    transition: 0.6s ease;
}

ul li a:hover{
    background-color: #fff;
    color: #000;
}

.main{
    max-width: 1200px;
    margin: auto;
}

.title{
    position: absolute;
    top: 1%;
    left: 1%;
}

.title h1{
    font-size: 40px;
    color: white;
}

.sub-menu{
    display: none;
    position: relative;
}

.rocks:hover .sub-menu{
    display: block;
    position: absolute;
    margin: 10px;
}

<header>
        <div class="main">
            <ul>
                <li class="active"><a href="#">Home</a></li>
                <li class="rocks"><a href="#">Planets</a>
                    <ul class="sub-menu">
                        <li><a href="#">Mercury</a></li>
                        <li><a href="#">Venus</a></li>
                        <li><a href="#">Earth</a></li>
                        <li><a href="#">Mars</a></li>
                        <li><a href="#">Jupiter</a></li>
                        <li><a href="#">Saturn</a></li>
                        <li><a href="#">Uranus</a></li>
                        <li><a href="#">Neptune</a></li>
                    </ul>
                 </li>
                <li><a href="#">Major Moons</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
        <div class="title">
            <h1>ASTRONOMY</h1>
        </div>
    </header>

在注释中告诉我是否需要样式下拉菜单的帮助。

将鼠标悬停在“行星”菜单上时，下拉菜单没有显示？

1 个答案: