我有一个标题，每个导航链接都会掉落一个巨型菜单，但由于大型菜单绝对定位，它位于相对定位导航的“顶部”。因此，当我尝试进入大型菜单时，它会随着导航链接的悬停边框底部消失。
通常我的问题只是填充，但这次似乎并非如此。我试图保持我的边框底部功能，以及能够达到我的超级菜单。
结果是:(点击打开代码段）
#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>
另外，这是一个小提琴：https://codepen.io/kmgiffin/pen/qYbyxo/
答案 0 :(得分：1)
问题是你在css中的以下一行：
.hello>li>a:hover + .dropdown-menu {
display: block;
padding-top: 30px;
}
这里将悬停触发器放在锚标记上，但是一旦将光标从锚点移动到下拉列表中，锚点就不再处于悬停状态，因此规则不再适用，并且您的下拉列表会返回到它＃＆＃ 39; s初始状态。
以下是针对li元素的修复程序。由于dropdown-menu是li的孩子，当您将鼠标悬停在dropdown-menu元素上时，您仍然在技术上将鼠标悬停在li父母身上
.hello>li:hover > .dropdown-menu {
display: block;
padding-top: 30px;
}
答案 1 :(得分：0)
#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;
}
}
ul.dropdown-menu:hover {
display: block;
}<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<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>