时间戳

首页 > 解决方案 > 当我将鼠标悬停在“行星”菜单上时，没有显示下拉菜单？

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

问题描述

我是 HTML 和 CSS 的新手，正在尝试制作一个关于天文学的随机网站。而且我无法弄清楚我的下拉菜单不起作用。我用谷歌搜索了很多，看了很多 youtube 视频，但仍然找不到解决方案。当我将 CSS 中的子菜单中的显示更改为阻止时，它会显示子菜单但在水平线上。我应该重写整个代码还是可编辑？我是新的 HTML 和 CSS，所以请原谅我的错误和缺乏知识。谢谢。

*{
    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></li>
                    <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><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>

标签： htmlcss

解决方案

这是因为您必须将子菜单放在 parent 内<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>

如果您需要帮助设置下拉菜单的样式，请在评论中告诉我。

推荐阅读