我整天都在处理这个问题，但我找不到让它发挥作用的方法。当我将鼠标悬停在父元素上时，我正试图显示一个子菜单。问题是，只要我尝试移出父元素，子菜单就会消失，即使子菜单被包裹但是父元素也是如此。我已经尝试了相邻的兄弟解决方案，但也不适合我，我不知道还有什么。下拉菜单还有一个绝对定位的容器，所以也许这是问题的一部分？这是代码：
<div class="header__top-bar top-bar show">
<a class="header__logo">
<img src="assets/img/logo.png" alt="Corporate Logo">
</a>
<nav class="main-menu">
<ul>
<li class="main-menu__item mega-dropdown">
<a href="#">¿ Quiénes somos ?</a>
<ul class="dropdown-menu mega-dropdown-menu">
<div class="container dropdown-container">
<li><a href="#">LA COMPAÑIA</a></li>
<li><a href="#">GOBIERNO CORPORATIVO</a></li>
</div>
</ul>
<div class="background-menu"></div>
</li>
<li class="main-menu__item mega-dropdown">
<a href="#">Inversores</a>
<ul class="dropdown-menu mega-dropdown-menu">
<div class="container dropdown-container">
<li><a href="#">INFORMACIÓN BURSÁTIL</a></li>
<li><a href="#">INFORMACIÓN FINANCIERA</a></li>
<li><a href="#">HECHOS RELEVANTES</a></li>
<li><a href="#">OPERACIONES SOCIETARIAS</a></li>
</div>
</ul>
<div class="background-menu"></div>
</li>
<li class="main-menu__item mega-dropdown"><a class="single-option" href="#">Activos</a></li>
<li class="main-menu__item mega-dropdown">
<a href="#">Actualidad</a>
<ul class="dropdown-menu mega-dropdown-menu">
<div class="container dropdown-container">
<li><a href="#">ACTUALIDAD</a></li>
<li><a href="#">GALERÍA MULTIMEDIA</a></li>
</div>
</ul>
<div class="background-menu"></div>
</li>
<li class="main-menu__item mega-dropdown"><a class="single-option" href="#">Contacto</a></li>
</ul>
</nav>
<nav class="tools">
<ul>
<li class="tools__item languages">
<span>ES</span>
<ul class="languages__list" aria-labelledby="dLabel">
<li><a href="#">EN</a></li>
</ul>
</li>
<li class="tools__item search">
<input type="text" id="q" name="q" class="header-search_input valid" value="" placeholder="Buscar" autocomplete="off" aria-invalid="false">
<a><i class="fa fa-search"></i></a>
</li>
</ul>
</nav>
</div>
SASS：
.header, .sticky-menu {
ul {
margin:0;
}
&__logo {
float:left;
}
.container>* {
display:inline-block;
}
.main-menu {
>ul {
>li {
display:block;
float:left;
position: relative;
&:last-child {
a {
margin-right: 0;
}
}
&:hover {
ul.dropdown-menu {
display:block;
}
.background-menu {
height:65px;
}
}
&.mega-dropdown {
position: static !important;
}
>a {
background:url(../img/icon-main-menu.png) no-repeat right 60%;
color: $white;
font: 1em "Palatino Linotype", "Book Antiqua", Palatino, serif;
margin-right:10px;
padding-right: 20px;
position:relative;
text-decoration: none;
@media only screen and (min-width:1024px) {
font-size: 1.2em;
margin-right:40px;
}
&:hover {
background:url(../img/icon-main-menu-hover.png) no-repeat right 60%;
color:$green;
}
}
a.single-option {
background: transparent;
padding-right: 0;
}
}
}
}
.tools {
float:right;
ul {
li {
color: $white;
display: inline-block;
padding-top: .5em;
padding-bottom: .5em;
&:first-child {
position: relative;
&:after {
background-color: white;
content: '';
height: 20px;
position: absolute;
right: 0;
top: 10px;
width: 1px;
}
}
&.languages {
width: 70px;
&.open {
background-color: $white;
color:$green;
padding:.5em .5em .5em .8em;
&:first-child {
&:after {
display:none;
}
}
.languages__list {
display:block;
}
span {
background: url("../img/drop-icon-close.png") no-repeat 95% 50%;
}
}
span {
background: url("../img/drop-icon.png") no-repeat 70% 50%;
cursor:pointer;
padding-right:2.5em;
display:block;
}
.languages__list {
background-color: $white;
display:none;
position: absolute;
right:0;
top:2.5em;
width: 70px;
li {
display: block;
&:after {
display: none;
}
a {
color: $blue;
display:block;
font-size: 1em;
padding:.5em .5em .5em .8em;
text-transform: uppercase;
&:hover {
color:$green;
}
}
}
}
}
&.search {
margin-left: 4px;
@media only screen and (min-width:920px) {
margin-left: 8px;
}
a {
img {
margin-top: 3px;
vertical-align: top;
}
}
.header-search_input {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background-color: $white;
border: none;
color: $bg-dark-grey;
display:none;
font-size: .625em;
font-weight: 600;
padding:.5em 0 .5em .5em;
position: relative;
text-transform: uppercase;
transition: width 1s ease-in-out;
vertical-align: top;
&.open {
display:inline-block;
transition: width 1s ease-in-out;
-webkit-transition: width 2s, height 4s;
width:200px;
}
&::-webkit-input-placeholder {
color: $text-grey;
}
}
}
a {
color: $white;
margin-right: 5px;
text-decoration: none;
@media only screen and (min-width:920px) {
margin-right: 10px;
}
}
img {
cursor: pointer;
margin-right: 10px;
@media only screen and (min-width:920px) {
margin-right: 15px;
}
}
}
}
}
这是一个笔记本。将鼠标悬停在菜单的第一个元素上，您将看到一个红色框。只要您将鼠标移出li元素以尝试到达下拉列表，它就会消失。