Question

我遇到了一个问题，当我将鼠标悬停在父菜单上时会出现子菜单但是当我尝试选择子菜单中的一个项目并从父项中删除光标时，子菜单会消失。
我已经看到了多个答案，但没有一个有效，我不确定它们是否不起作用，或者只是因为我不熟悉而我不熟悉，因为我对此不熟悉。
这是CSS代码：

.navclass > ul {
background-color:#5E5D5D;
color:#D8D8D8;
font-size:20px;
font-family:sans-serif;
}
.navclass > ul > li {
list-style-type: none;
display: inline-block;
padding:5px 30px;
position:relative;
}
.navclass > ul > li:hover {
background-color:#383838;
}
ul.sub-menu{
position:absolute;
background-color:#383838;
list-style-type: none;
width:173px;
padding-left:0px;
margin-left:0px;
padding-top:5px;
opacity:0;
}
ul.sub-menu li {
padding-left:25px;
padding-top:-5px;
padding-bottom:5px;
}
.navclass li:hover +.sub-menu{
opacity:1
}

还有另一个问题，我认为这与此相关，我在菜单中添加了一个箭头，但它没有悬停效果，我似乎无法理解为什么这是代码：

<nav class='navclass'>
<ul>
     <li>pvp tutorials</li>
<ul class="sub-menu">
<li><a href="">the best clicking techniques</a></li>
<li><a href="aiming.html">get better at aiming</a></li>
<li><a href="strafingintroduction.html">strafing:introduction</a></li>
<li><a href="blockhitting.html">how to block hit</a></li>
</ul>
<span class="arrow">&#9660;</span>

Answer 1

子菜单消失的问题是子菜单不在父li中。如果您将子菜单移动到父li并将css从li旁边的.sub-menu更改为li的子菜单.sub菜单，那么它将按预期工作：

.navclass li:hover .sub-menu

查看here。

对于不在悬停效果中的箭头，解决方案与我上面提到的解决方案非常相似。将箭头移动到父li。

css下拉菜单不工作，子菜单消失

1 个答案: