我有一个包含三个级别的导航菜单，但是无法访问上一个菜单。如果您在此处看到示例：“产品” =>在此下方还有两个菜单级别，即item1，item2，item3。如果您再次移至item3，则需要显示与item3菜单相关的子菜单。单击此处，查看显示item-3.1，item-3.2，item-3.3后用户是否将鼠标悬停在第3项上。尝试将鼠标悬停在“产品”的三级菜单时，它突然消失。
下面的HTML和CSS代码示例：
<!doctype html>
<html>
<head>
<title>dropdown</title>
<style>
#nav-main li a.nav-link {
border-bottom: 3px solid transparent;
padding-top: 28px;
padding-bottom: 20px;
transition: 0.3s all ease-in-out;
-webkit-transition: 0.3s all ease-in-out;
-moz-transition: 0.3s all ease-in-out;
-o-transition: 0.3s all ease-in-out;
-ms-transition: 0.3s all ease-in-out;
}
#nav-main a.nav-link {
text-decoration: none;
color: #8c8c8c;
font-size: 1.4rem;
font-weight: 600;
text-transform: uppercase;
}
.sub-menu-panel {
display: none;
background: #ffffff;
border-top: 3px solid #212121;
border-bottom: 3px solid #212121;
margin-top: -3px;
transition: 0.3s all ease-in-out;
-webkit-transition: 0.3s all ease-in-out;
-moz-transition: 0.3s all ease-in-out;
-o-transition: 0.3s all ease-in-out;
-ms-transition: 0.3s all ease-in-out;
}
.dropdown-menu a{background-color:#cfcfcf;padding:10px;}
ul li.sub-menu:hover div.sub-menu-pannel{display:grid;}
ul.nav > li.dropdown:hover > div.dropdown-menu{display: grid;}
li.sub-menu .sub-menu-panel > a.dropdown:hover + div.dropdown-menu{display: grid;position: absolute;left: -159px;top: 53px;;}
li.sub-menu .sub-menu-panel > a.dropdown + div.dropdown-menu > a.dropdown:hover + div.dropdown-menu{display: grid;}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<nav role="navigation" id="nav-main" class="okayNav">
<ul class="nav navbar-nav " style="display:flex;">
<li><a alt="Sencillo" class="nav-link page-scroll" href="#">Home</a></li>
<li><a alt="Sencillo" class="nav-link page-scroll" href="#services">Services</a></li>
<li><a alt="Sencillo" class="nav-link page-scroll" href="#contact">Contact</a></li>
<li><a alt="Sencillo" class="nav-link page-scroll" href="#features">Employee Login</a></li>
<li class="dropdown sub-menu active">
<a alt="Sencillo" class="dropdown-toggle nav-link" href="#" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" data-hover="dropdown">Products <span class="caret"></span></a>
<div class="dropdown-menu sub-menu-panel">
<a href="#">item-1</a>
<a href="#">item-2</a>
<a href="#" class="dropdown">item-3</a>
<div class="dropdown-menu">
<a href="#">item-31</a>
<a href="#">item-32</a>
<a href="#" class="dropdown">item-33</a>
<div class="dropdown-menu">
<a href="#">item-33-1</a>
<a href="#">item-33-2</a>
</div>
</div>
</div>
</li>
<li><a alt="Sencillo" class="nav-link page-scroll" href="#leave-message">Contact</a></li>
</ul>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
答案 0 :(得分：2)
设置:hover元素的样式时，仅当元素悬停在光标上时，该元素才起作用。因此，当您将鼠标悬停在a.dropdown div.dropdown-menu旁边时，但是将其从a.dropdown移到div.dropdown-menu本身时，:hover效果消失了，使div也消失了要解决此问题，您需要将.dropdown-menu放在.dropdown元素内，并使用.dropdown .dropdown-menu代替.dropdown + .dropdown-menu。在这种情况下，当您将光标移到.dropdown-menu元素上时，:hover效果将保留，因为悬停子元素也意味着悬停父元素。
我建议您将结构更改为
<div class="dropdown-menu sub-menu-panel">
<a href="#">item-1</a>
<a href="#">item-2</a>
<div class="dropdown">
<a href="#">item-3</a>
<div class="dropdown-menu">
<a href="#">item-31</a>
<a href="#">item-32</a>
<div class="dropdown">
<a href="#">item-33</a>
<div class="dropdown-menu">
<a href="#">item-33-1</a>
<a href="#">item-33-2</a>
</div>
</div>
</div>
</div>
</div>
并将css part更改为
li.sub-menu .sub-menu-panel > .dropdown:hover > div.dropdown-menu{display: grid;position: absolute;left: -159px;top: 53px;;}
答案 1 :(得分：0)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
</style>
</head>
<body>
<div class="container">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Drop down
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Tab 1</a></li>
<li><a tabindex="-1" href="#">Tab 2</a></li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Tab 11</a></li>
<li><a href="#">Tab 21</a></li>
</ul>
</li>
</ul>
</div>
</div>
<script>
$(document).ready(function() {
$('.dropdown-submenu a.test').on("click", function(e) {
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script>
</body>
</html>
您实际上可以尝试并实施。.