我正在玩来自 w3schools 的导航栏示例.我希望导航栏下拉菜单是页面的整个宽度,并在悬停时显示下拉菜单。
我通过在下拉菜单类中设置 position:initial;
并在下拉菜单类中设置 width:100%;
来管理全 Angular 功能。
问题是,当设置 position:initial
时,当您将鼠标悬停在下拉菜单上以单击其中一个链接时,下拉菜单会消失。
关于如何解决这个问题有什么建议吗?
这是我尝试过的:
- 将下拉菜单类设置为 display:none,将下拉菜单类设置为 display:block。
- 确保设置为 display:none 的类高于带有 display:block 的类(根据此处的答案:css hover drop down menu disappears when trying to select menu option)
- 删除了导航栏和导航栏元素周围的所有填充(根据此处的问题:Dropdown menu on hover dissapears (using bootstrap))
- 将列表元素设置为 display:block on hover,这样他们就会看到悬停并且下拉列表不会消失。
- 尝试了不同的浏览器。 Chrome 和 FireFox 中存在同样的问题。
.navbar { background-color: transparent !important; border-color: transparent !important; border-radius: 0 !important; padding-bottom:0 !important; padding-left:8vw !important; padding-right:8vw !important; } .nav a{ color:#000000 !important; padding-bottom:0px !important; } .dropdown-menu { border-radius: 0px !important; border: solid !important; border-width: 1px !important; border-color: lightgray !important; border-radius: 0 !important; -webkit-box-shadow: none !important; box-shadow: none !important; text-align:left !important; padding-left: 1vw !important; padding-right: 1vw !important; padding-top:2vw !important; padding-bottom:1vw !important; display: none !important; width:100% !important; } .dropdown{ position:initial !important; display: block !important; } .dropdown-menu:hover{ top:0 !important; } .dropdown-menu>ul>li:hover{ display: block !important; } .dropdown:hover .dropdown-menu { display: block !important; margin-top: 0 !important; } <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">WebSiteName</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li class="dropdown"> <a class="dropdown-toggle" href="#">Page 1 </a> <ul class="dropdown-menu"> <li><a href="#">Page 1-1</a></li> <li><a href="#">Page 1-2</a></li> <li><a href="#">Page 1-3</a></li> </ul> </li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul> </div> </nav>
最佳答案
你只需要这个 CSS:
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<nav class="navbar">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
<div class="container">
<h3>Navbar With Dropdown</h3>
<p>This example adds a dropdown menu for the "Page 1" button in the navigation bar.</p>
</div>
确保全屏查看 StackSnippet,方法是单击 Run Code Snippet 按钮最右侧的 Full Page
关于html - Bootstrap - 悬停时下拉菜单消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56614340/