【发布时间】：2021-10-26 11:10:27
【问题描述】：
我正在尝试构建一个包含 HTML 和 CSS 的下拉菜单，但问题是当我将鼠标悬停在包含子菜单的菜单项上时，会出现这个，但是当我尝试悬停它时，它会消失。
这是代码
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 100%;
}
header {
height: 120px;
background: #353638;
width: 100%;
z-index: 1;
}
#c-header {
width: 60%;
margin: 0 auto;
height: 100%;
}
#logo {
float: left;
width: 76px;
height: 35px;
margin: 40px;
}
#logo img {
display: block;
height: 100%;
width: 100%;
}
nav {
float: right;
margin: 15px;
line-height: 70px;
}
.nav-item {
list-style-type: none;
float: left;
font-family: 'Lato', sans-serif;
font-weight: bold;
height: 90px;
display: block;
position: relative;
z-index: 1;
}
.nav-item > a {
text-decoration: none;
color: white;
display: block;
height: 100%;
line-height: 90px;
padding: 0 15px 0 15px;
transition: background .5s ease;
}
.nav-item a:hover {
background: #337ab7;
}
.nav-item .sub-menu {
background: #337ab7;
position: absolute;
width: 250px;
display: none;
z-index: 9999;
}
.sub-menu ul {
overflow: hidden;
list-style-type: none;
padding: 10px;
}
.sub-menu-item {
height: 40px;
}
.sub-menu-item a {
text-decoration: none;
color: white;
display: block;
line-height: 32px;
padding: 4px 0 4px 20px;
transition: background .3s ease;
}
.sub-menu-item a:hover {
background: #333;
}
.nav-item a:hover ~ .sub-menu {
display: block;
z-index: 9999;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Sima</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/font-awesome/css/font-awesome.css">
<script src="js/jquery-3.1.0.min.js"></script>
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>
<body>
<header>
<div id="c-header">
<a href="#" id="logo">
<img src="img/logo.png" alt="sima_logo">
</a>
<nav id="menu">
<ul>
<li class="nav-item">
<a href="#">Home</a>
</li>
<li class="nav-item">
<a href="#" id="oap">Our Another Page
<i class="fa fa-angle-down" aria-hidden="true"></i>
</a>
<div class="sub-menu">
<ul id="oap-sub-menu">
<li class="sub-menu-item"><a href="#">Our Team</a>
</li>
<li class="sub-menu-item"><a href="#">Our Testimonial</a>
</li>
<li class="sub-menu-item"><a href="#">Our Latest Blog</a>
</li>
<li class="sub-menu-item"><a href="#">Our Pricing</a>
</li>
<li class="sub-menu-item"><a href="#">Our Happy Client</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a href="#" id="sp">Stick Page
<i class="fa fa-angle-down"></i>
</a>
<div class="sub-menu">
<ul id="sp-sub-menu">
<li class="sub-menu-item"><a href="#">Blog Page</a>
</li>
<li class="sub-menu-item"><a href="#">Single Blog Page</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a href="#">About</a>
</li>
<li class="nav-item">
<a href="#">Our Skill</a>
</li>
<li class="nav-item">
<a href="#">Our Service</a>
</li>
<li class="nav-item">
<a href="#">Our Portfolio</a>
</li>
<li class="nav-item">
<a href="#">Contact Us</a>
</li>
</ul>
</nav>
</div>
</header>
<script src="js/script.js"></script>
</body>
</html>【问题讨论】：
-
忘记了，可以看这里的网站codepen.io/MarcoASP/pen/VKLwJG
-
你的背景和颜色都是白色的...这是问题所在？
-
为什么不悬停 .nav-item 并显示 .submenu？ .nav-item:hover .sub-menu { display: block; z指数：9999； }