如何解决在导航栏中创建子菜单
我正在尝试为我的导航栏创建一个子菜单,但是当我将鼠标悬停在“主题”上时它没有显示。我可以看到它在“主题”标题下,但是当我将鼠标悬停在“主题”上时,我不确定如何让它出现。我在这方面已经有一段时间了,但没有成功。任何帮助,将不胜感激。非常感谢。
HTML 代码:
</head>
<body>
<header class="navbar">
<div class="container flex">
<img src="fcllogo1.jpg" alt="FCL logo" />
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">About</a></li>
<li>
<a href="#">Subjects</a>
<ul>
<li><a href="#">Maths</a></li>
<li><a href="#">English</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
CSS 代码:
* {
Box-sizing: border-Box;
margin: 0;
padding: 0;
}
body {
font-family: Arial,Helvetica,sans-serif;
background-color: #ffffff;
line-height: 1.6;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: #ffffff;
}
.navbar {
background-color: grey;
height: 70px;
color: black;
}
.navbar ul {
display: flex;
}
.navbar ul ul {
position: absolute;
background-color: aquamarine;
padding: 0;
text-align: left;
display: block;
}
.navbar ul ul li {
border: 1px solid;
display: none;
width: auto;
padding: 0;
padding-left: 10px;
margin: 0;
}
header li:hover ul {
display: block;
}
.navbar li {
padding: 20px;
}
.navbar a {
padding: 10px;
margin: 0 5px;
}
.navbar a:hover {
color: rgb(145,46,46);
}
.navbar .flex {
justify-content: space-between;
position: relative;
overflow: visible;
}
.container {
border: none;
max-width: 1500px;
margin: 0 auto;
overflow: auto;
padding: 0 40px;
}
.flex {
display: flex;
justify-content: center;
}
解决方法
在此处查看这两个 CSS 选择器:
.navbar ul ul li {
border: 1px solid;
display: none;
width: auto;
padding: 0;
padding-left: 10px;
margin: 0;
}
header li:hover ul {
display: block;
}
这就是你的问题所在。它们需要是一个公共选择器,唯一的区别是“悬停”伪选择器放置在隐藏元素的父元素上。
我相信这正是您想要的(请注意两个选择器上对“.navbar ul li ul”的更改):
.navbar ul li ul {
border: 1px solid;
display: none;
width: auto;
padding: 0;
padding-left: 10px;
margin: 0;
}
.navbar ul li:hover ul {
display: block;
}
这个网站有更深入的解释:https://leewarrick.com/blog/css-only-menus/。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。