У меня есть заголовок, в котором каждая навигационная ссылка раскрывает мегаменю, но, поскольку мегаменю абсолютно позиционировано, оно находится «поверх» относительно позиционированного навигационного меню. Поэтому, когда я пытаюсь перейти в мегаменю, оно исчезает вместе с нижней границей навигационной ссылки при наведении курсора.
Обычно моя проблема заключается в простом заполнении, но на этот раз, похоже, это не так. Я пытаюсь сохранить свою функцию нижнего края вместе с возможностью доступа к моему мегаменю.
Результат: (нажмите, чтобы открыть фрагмент)
#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/
