此处正在发布html代码。我的疑问是子菜单下是否有一个菜单。如果您在此处看到示例：产品=>在这3个子菜单下，即item1，item2，item3。如果您再次移至item3，则需要显示与item3菜单相关的子菜单。请同时检查以下屏幕截图。我的代码在哪里出错？任何人都可以告诉我。Click here and see if user mouse over on item-3 after displaying item-31,item-32,item-33. Am trying to select item-31 not showing suddenly closing
<!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;
}
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">
<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://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
<!-- end snippet -->
<!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;
}
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">
<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>
<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.sub-menu .sub-menu-panel> a.dropdown：hover + div.dropdown-menu {display：grid; position：absolute; left：-185px; top：124px;} li.sub-menu .sub-menu-panel> a.dropdown + div.dropdown-menu> a.dropdown：hover + div.dropdown-menu {display：grid;}
答案 0 :(得分：0)
有关将来的问题，请参阅StackOverflow指南。没有正确的格式，更复杂的问题将无法解决。
话虽这么说，您的问题是a:hover，您必须在<li>上进行悬停，所以请更改
li.sub-menu .sub-menu-panel > a.dropdown:hover + div.dropdown-menu至li.sub-menu .sub-menu-panel:hover > div.dropdown-menu。
原因是，当您移至子菜单时，您不再在<a>上徘徊，因此a:hover不再成立。但是子菜单位于<li>内部，因此您仍将鼠标悬停在<li>上，子菜单不会消失