下拉子菜单返回初始位置

Question

我试着创建一个下拉子菜单，它工作得很好，但问题是，当我试着用光标向下移动时，子菜单会下降到原来的位置。

我已经尝试了几种解决方案，如:伪类之后，z-index在列表中，heck我甚至试图给出一个负值，以便子菜单经过需要悬停的元素，仍然没有。

任何指导将不胜感激!

<div class="settings">
<div class="settings__language">
<div class="settings__language__primary"><img src="../scss/vendors/img/uk_icon.jpg" alt="" class="settings__language__flag">
<span class="settings__language__text">United Kingdom</span>&nbsp;&nbsp;&nbsp;<i class="fas fa-angle-down settings__language__icon"></i></div>
<ul class="settings__language__list">
<li class="settings__language__item current">English</li>
<li class="settings__language__item">Romana</li>
<li class="settings__language__item">Deutsch</li>
</ul>
</div>
</div>

.settings__language {
&__primary {
cursor: pointer;
display: inline-block;
}
&__text {
font-size: 1.5rem;
line-height: 1.7;
font-weight: 500;
}
&__flag {
width: 1.8rem;
padding-right: 0.5rem;
}
&__icon {
color: $color-primary;
}
&__list {
list-style: none;
font-size: 1.3rem;
border-radius: 5px;
display: block;
border: 1px solid #eee;
width: 8rem;
box-shadow: 0 2px 5px rgba($color-black, 0.2);
transform: translateY(1rem);
// visibility: hidden;
transition: all 0.2s;
overflow: hidden;
}
&__item {
display: inline-block;
padding: 0.4rem 1rem;
width: 100%;
cursor: pointer;
&:nth-last-child(1) {
margin-bottom: 1rem;
}
&:nth-last-child(3) {
margin-top: 1rem;
}
}
&__primary:hover + &__list {
visibility: visible;
transform: translateY(0);
}

}

Answer 1

从.settings__language__list中移除transform: translateY(1rem);会阻止菜单移动

.settings__language__primary {
cursor: pointer;
display: inline-block;
}
.settings__language__text {
font-size: 1.5rem;
line-height: 1.7;
font-weight: 500;
}
.settings__language__flag {
width: 1.8rem;
padding-right: 0.5rem;
}
.settings__language__icon {
color: $color-primary;
}
.settings__language__list {
list-style: none;
font-size: 1.3rem;
border-radius: 5px;
display: block;
border: 1px solid #eee;
width: 8rem;
box-shadow: 0 2px 5px rgba($color-black, 0.2);
/* transform: translateY(1rem); */
/* visibility: hidden; */
transition: all 0.2s;
overflow: hidden;
}
.settings__language__item {
display: inline-block;
padding: 0.4rem 1rem;
width: 100%;
cursor: pointer;
}
.settings__language__item:nth-last-child(1) {
margin-bottom: 1rem;
}
.settings__language__item:nth-last-child(3) {
margin-top: 1rem;
}

.settings__language__primary:hover+.settings__language__list {
visibility: visible;
transform: translateY(0);
}

<div class="settings">
<div class="settings__language">
<div class="settings__language__primary"><img src="../scss/vendors/img/uk_icon.jpg" alt="" class="settings__language__flag">
<span class="settings__language__text">United Kingdom</span>&nbsp;&nbsp;&nbsp;<i class="fas fa-angle-down settings__language__icon"></i></div>
<ul class="settings__language__list">
<li class="settings__language__item current">English</li>
<li class="settings__language__item">Romana</li>
<li class="settings__language__item">Deutsch</li>
</ul>
</div>
</div>

Answer 2

解决了。这是愚蠢的，在html中，子菜单必须在用于悬停效果的元素中。