在最大宽度为768px的媒体查询中，"关于"菜单下的子菜单与"课程"菜单重叠，我希望它在单击时按下以显示子菜单。我尝试了很多选择，但都不起作用。任何帮助都将不胜感激。
var navLinks = document.getElementById("navLinks");
function displayMenu() {
navLinks.style.right = "0";
}
function hideMenu() {
navLinks.style.right = "-200px";
}nav{
display: flex;
align-items: center;
padding: 2% 6%;
justify-content: space-between;
}
.nav-links{
flex: 1;
text-align: right;
}
.nav-links ul li{
display: inline-block;
padding: 8px 12px;
position: relative;
list-style: none;
}
.nav-links ul li a{
color: #000;
text-decoration: none;
font-size: 15px;
}
.nav-links ul li::after{
content: "";
width: 0%;
height: 2px;
background: #ff5733;
display: block;
margin: auto;
}
.nav-links ul li:hover::after{
width: 100%;
transition: 0.5s;
}
.nav-links ul li:nth-child(2):hover::after{
background: none;
width: 0;
}
nav .fa{
display: none;
}
nav .fa-chevron-down{
display: inline;
margin-right: 6px;
}
.sub-menu-1{
display: none;
}
.nav-links ul li:hover .sub-menu-1{
display: block;
position: absolute;
background-color: #ff5733;
margin-top: 15px;
margin-left: -15PX;
}
.nav-links ul li:hover .sub-menu-1 ul{
display: block;
margin: 10px;
}
.nav-links ul li:hover .sub-menu-1 ul li{
width: 150px;
padding: 10px;
border-bottom: 1px dotted #fff;
background: transparent;
border-radius: 0;
text-align: left;
text-transform: uppercase;
font-weight: 500;
}
.nav-links ul li:hover .sub-menu-1 ul li:last-child{
border-bottom: none;
}
.nav-links ul li:hover .sub-menu-1 ul li a:hover{
color: bisque;
}<html>
<body>
<section>
<nav>
<!-- Navigation Links -->
<div class="nav-links" id="navLinks">
<i class="fa fa-times" onclick="hideMenu()"></i>
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="#"><i class="fa fa-chevron-down"></i>ABOUT</a>
<div class="sub-menu-1">
<ul>
<li><a href="message.html">Principal Message</a></li>
<li><a href="history.html">School History</a></li>
<li><a href="mission.html">Mission & Vision</a></li>
</ul>
</div>
</li>
<li><a href="course.html">COURSE</a></li>
<li><a href="news.html">NEWS</a></li>
<li><a href="gallery.html">GALLERY</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</div>
<i class="fa fa-bars" onclick="displayMenu()"></i>
</nav>
</section>
</body>
</html>Fiddle演示
我添加了这两个规则，它似乎表现得更好。
这设置了所有内容的默认值(不需要(，这样我们就可以知道的变化
.nav-links ul, .nav-links ul li{
position:relative;
z-index:0;
}
当你悬停它们时，这会将它们设置在顶部。我喜欢一次至少调整10个z索引，因为如果需要的话，这会给你在以后插入它们的空间，而不必调整其他所有内容。
.nav-links ul li:hover{
z-index:10;
}