我有一个标题，其中每个导航链接都会下拉一个大型菜单，但由于大型菜单是绝对定位的，因此它位于相对定位的导航的“顶部”。因此，当我尝试移动到大型菜单时，它会消失，连同导航链接的悬停边框底部。
通常我的问题只是填充，但这次似乎不是这样。我试图保留我的边框底部功能以及能够访问我的大型菜单。
结果是:(点击打开片段)
#navigation {
padding-top: 16px;
padding-bottom: 5px;
border-bottom: 1px solid #979797;
background-color: #FFFFFF;
}
.hello>li {
padding: 0px 15px 0px 15px;
}
.hello>li>a {
color: #4A4A4A;
padding: 20px 15px 46px;
margin-bottom: 0px;
}
.hello>li:first-child a:hover {
border-bottom: none;
padding-bottom: 0px;
text-decoration: none;
margin-bottom: 0px;
}
.hello>li:first-child {
padding-left: 0px;
}
.hello>li:last-child {
padding-right: 0px;
}
.hello>li>a:hover, .hello>li>a:visited, .hello>li>a:focus, .hello>li>a:active {
text-decoration: none;
color: #4A4A4A;
border-bottom: 4px solid #8DB9CA;
padding-bottom: 33px;
}
.hello>li>a:hover + .dropdown-menu {
display: block;
padding-top: 30px;
}
#navigation ul.hello .dropdown-menu .nav-drop-list-block li {
display: block;
text-align: left;
}
#navigation ul.hello .dropdown-menu .nav-drop-list-block p {
display: block;
text-align: left;
}
.dropdown-menu {
position: absolute;
width: 100%;
text-align: center;
top: 70px;
border-radius: 0px;
margin-top: 0px;
padding-top: 30px;
}
.dropdown-menu>li>a {
color: #4A4A4A;
}
.dropdown{
position: static;
}
.dropdown-container {
position: static;
}
#navigation ul.hello li {
display: inline-block;
}
#search-desk-block {
display: block;
float: right;
position: relative;
top: 20px;
}
#search-desk-block {
position: relative;
}
#search-desk-block input {
width: 250px;
border-color: #63666A;
border-radius: 6px;
}
.search-desk-icon {
position: absolute;
right: 9px;
bottom: 20px;
}
.search-desk-icon svg {
font-size: 20px;
}
.nav-drop-img {
max-width: 253px;
}
@media (max-width: 1199px) {
.hello>li {
padding: 0px 5px 0px 5px;
}
.hello>li>a {
color: #4A4A4A;
padding: 20px 5px 46px;
margin-bottom: 0px;
}
}
@media (max-width: 991px) {
#navigation {
display: none;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="header">
<section id="navigation">
<div class="container">
<div class="row">
<div class="col-md-12 dropdown-container">
<div class="dropdown">
<ul class="hello">
<li>
<a href="">
<img src="assets/img/danze-logo-main.png" style="max-width: 160px;" />
</a>
</li>
<li>
<a href="" class="dropdown-toggle" id="drodownMenu1" data-toggle="dropdown" aria-expanded="true">
KITCHEN
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
<div class="container">
<div class="row">
<div class="col-sm-3">
<ul class="nav-drop-list-block">
<p>
PRODUCTS
</p>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Pull down/ pull out faucets
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Single Handle Faucets
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Two Handle Faucets
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Dual Control Faucets
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Pot Fillers
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Bar & Convenience Faucets
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Accessories
</a>
</li>
</ul>
<ul class="nav-drop-list-block">
<p>
STYLE
</p>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Contemporary
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Traditional
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Transitional
</a>
</li>
</ul>
</div>
<div class="col-sm-3">
<ul class="nav-drop-list-block">
<p>
FINISH
</p>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Chrome
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Stainless Steel
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Oil Rubbed Bronze
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Satin Black
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Antique Copper
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Polished Nickel
</a>
</li>
</ul>
</div>
<div class="col-sm-3">
<ul class="nav-drop-list-block">
<p>
COLLECTION
</p>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Amalfi™
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Antiock™
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Draper
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Melrose™
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Midtown™
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Opulence™
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Parma™
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Parma™
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Prince™
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Selene™
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Sirius™
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
The Foodie™
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Vaughn
</a>
</li>
</ul>
</div>
<div class="col-sm-3">
<img src="assets/img/slider-zoom-img-1.jpg" class="nav-drop-img" />
</div>
</div>
</div>
</ul>
</li>
<li>
<a href="" href="" class="dropdown-toggle" id="drodownMenu2" data-toggle="dropdown" aria-expanded="true">
BATHROOM
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
hello
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
how are you
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
im fine
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
been doing well
</a>
</li>
<li role="presentation" style="color:green">
how about you?
</li>
</ul>
</li>
<li>
<a href="" href="" class="dropdown-toggle" id="drodownMenu3" data-toggle="dropdown" aria-expanded="true">
PROFESSIONALS
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
<div class="container">
<div class="row">
<div class="col-sm-4">
<ul>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
tired
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
hungry
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
sleepy
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
toothy
</a>
</li>
</ul>
</div>
<div class="col-sm-4">
<ul>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
tired
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
hungry
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
sleepy
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
toothy
</a>
</li>
</ul>
</div>
<div class="col-sm-4">
<img src="assets/img/slider-zoom-img-1.jpg" style="max-width: 100%;" />
</div>
</div>
</div>
</ul>
</li>
<li>
<a href="" href="" class="dropdown-toggle" id="drodownMenu4" data-toggle="dropdown" aria-expanded="true">
INNOVATIONS
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu4">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Action
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Another action
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Something else here
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Separated link
</a>
</li>
<li role="presentation" style="color:green">
Yay! The menu extends the full width of the page
</li>
</ul>
</li>
<li id="search-desk-block">
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder="Search" />
<span class="search-desk-icon">
<i class="fas fa-search"></i>
</span>
</div>
</form>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>此外，还有一个 fiddle :https://codepen.io/kmgiffin/pen/qYbyxo/
最佳答案
问题出在您的 css 中的以下行:
.hello>li>a:hover + .dropdown-menu {
display: block;
padding-top: 30px;
}
在这里，您将悬停触发器放置在 anchor 标记上，但是一旦您将光标从 anchor 移到下拉列表上， anchor 不再处于悬停状态，因此规则不再适用，您的下拉列表将返回到初始状态状态。
下面是针对 li 元素的修复。由于 dropdown-menu 是 li 的子元素，因此当您将鼠标悬停在 dropdown-menu 元素上时，技术上您仍将鼠标悬停在其上li 父级
.hello>li:hover > .dropdown-menu {
display: block;
padding-top: 30px;
}
关于html - 当位置相对导航链接未悬停时，绝对定位的大型菜单消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49989212/