html - 无法在父菜单下移动子菜单(下拉菜单)
问题描述
我在对齐父菜单下的下拉菜单/子菜单时遇到问题。需要明确的是,当我将鼠标悬停在Services上时,我希望显示我的子菜单。我将发布代码并附上一张照片以清晰。
编辑:我已经更新了片段!我认为现在还可以。谢谢!
body {
font-family: 'Poppins', sans-serif;
background-color: -webkit-linear-gradient(to right, #2a5298, #1e3c72);
background-color: linear-gradient(to right, #2a5298, #1e3c72);
background-color: #1e3c72;
display: flex;
flex-direction: column;
min-height: 100vh;
}
button {
font-family: 'Poppins', sans-serif;
}
header {
display: flex;
width: 100%;
margin: auto;
align-items: center;
}
nav {
flex: 1;
height: 10vh;
}
.nav-links ul {
position: absolute;
/* display: none; */
}
.nav-links li a {
color: white;
font-weight: 400;
text-decoration: none;
display: block;
padding: 15px;
font-size: 18px;
}
.nav-links li {
transition: all .6s ease-out;
border-radius: 40px;
height: 70%;
display: flex;
justify-content: center;
align-items: center;
padding: 10px 18px;
}
.nav-links li:hover {
background-color: white;
border-radius: 40px;
height: 60%;
display: flex;
justify-content: center;
align-items: center;
color: #1e3c72;
-webkit-transition: all .6s ease;
transition: all .6s ease;
padding: 10px 18px;
}
.nav-links li:hover a {
color: #1e3c72;
}
.nav-links img {
height: 30px;
width: 30px;
filter: invert(100%);
-webkit-filter: invert(100%);
filter: brightness(0) invert(1);
cursor: pointer;
}
.nav-links li i {
padding: 0 10px;
}
.nav-links {
display: flex;
justify-content: space-around;
list-style: none;
align-items: center;
width: 50%;
height: 100%;
margin-left: auto;
}
<nav>
<ul class="nav-links">
<li><a class="nav-link" href="index.html" id="active">Home</a></li>
<li><a class="nav-link" href="#">Services</a>
<ul>
<li><a href="#">Quality Management</a></li>
<li><a href="#">Project Management</a></li>
<li><a href="#">Auditing</a></li>
</ul>
</li>
<li><a class="nav-link" href="#">About</a></li>
<li><a class="nav-link" href="#">Contact</a></li>
</ul>
</nav>
解决方案
在您共享的资源有限的情况下,我认为这就是您所需要的?
* {
margin: 0;
padding: 0;
}
nav {
height: 30px;
}
nav ul {
display: block;
position: relative;
z-index: 100;
}
nav ul li {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
nav ul li ul {
display: none;
}
nav ul li a {
width: 150px;
height: 30px;
display: block;
text-decoration: none;
text-align: center;
line-height: 30px;
background-color: black;
color: white;
}
nav ul li a:hover {
background-color: red;
}
nav ul li:hover ul {
position: absolute;
top: 30px;
display: block;
width: 100px;
}
nav ul li:hover ul li {
display: block;
}
<nav>
<ul class="nav-links">
<li><a class="nav-link" href="index.html" id="active">Home</a></li>
<li><a class="nav-link" href="#">Services</a>
<ul>
<li><a href="#">Quality Management</a></li>
<li><a href="#">Project Management</a></li>
<li><a href="#">Auditing</a></li>
</ul>
</li>
</ul>
</nav>
推荐阅读
- python - 将数据框列从字符串转换为日期为过去 2262 年的列
- kubernetes - 安装后正在重新创建 Istio ingress pod
- c - 难以理解指向指针增量值的指针
- python - 为什么 python pickle 对 unix 不起作用?
- python - 如何在 matplotlib 中编辑图例的文本颜色?
- vue.js - AWS Cloudfront 托管网站中的 Vue.js 路由
- java - Mac 上的 Java Xattjr - 无法加载资源:libxattrj.dylib
- vue.js - 订购 vue.js 文件的最佳实践
- c# - 如何正确等待来自无模式窗口的输入
- php - 在 PHP 中将布尔表达式解析为 MySql 查询