<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a href="index.html" class="navbar-brand display-4">NintendoWorlds</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#menu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="menu">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a href="#" class="nav-link" data-toggle="dropdown">Games</a>
<ul class="dropdown-menu" >
<li><a href="#" class="dropdown-item">Latest</a></li>
<li><a href="#" class="dropdown-item">Best Selling</a></li>
<li><a href="#" class="dropdown-item">Our Pick</a></li>
</ul>
</li>
@media all and (min-width:992px){
.navbar .nav-item .dropdown-menu{display:none;}
.navbar .nav-item:hover .dropdown-menu{display:block;}
.navbar .nav-item .dropdown-menu{margin-top:0;}
}
ul.dropdown-menu a.dropdown-item{
padding: 14px;
margin: 8px;
}
当我将鼠标悬停在“ Our Pick”上时,我想显示一个菜单。你们能告诉我怎么做吗?
答案 0 :(得分:1)
您可以在我们的选择ul
中添加嵌套的li
元素,并在我们的选择menu
上显示我们的选择的子right
。
我们可以使用:hover伪类来做到这一点。当您将鼠标从submenu
中移出时,Our Pick
将隐藏起来
实时工作演示
@media all and (min-width:992px) {
.navbar .nav-item .dropdown-menu {
display: none;
}
.navbar .nav-item:hover .dropdown-menu {
display: block;
}
.navbar .nav-item .dropdown-menu {
margin-top: 0;
}
}
ul.dropdown-menu a.dropdown-item {
padding: 14px;
margin: 8px;
}
.our-pick {
display: none;
list-style-type: none;
}
.sub-menu:hover .our-pick {
display: block;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a href="index.html" class="navbar-brand display-4">NintendoWorlds</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#menu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="menu">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a href="#" class="nav-link" data-toggle="dropdown">Games</a>
<ul class="dropdown-menu">
<li><a href="#" class="dropdown-item">Latest</a></li>
<li><a href="#" class="dropdown-item">Best Selling</a></li>
<li class="sub-menu"><a href="#" class="dropdown-item">Our Pick</a>
<ul class="our-pick">
<li><a href="#" class="dropdown-item">Our Pick 1</a></li>
<li><a href="#" class="dropdown-item">Our Pick 2</a></li>
<li><a href="#" class="dropdown-item">Our Pick 3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>
答案 1 :(得分:0)
如果菜单直接位于链接之后,例如:
<ul class="dropdown-menu" >
<li><a href="#" class="dropdown-item">Latest</a></li>
<li><a href="#" class="dropdown-item">Best Selling</a></li>
<li>
<a href="#" class="dropdown-item">Our Pick</a>
<ul class = "menu">
// menu
</ul>
</li>
</ul>
您可以在CSS中使用+
选择器:
.dropdown-item:hover + .menu { display:block; }