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

I am facing a problem, when I hover over the parent the sub menu appears but when I try to select one of the items in the sub menu and remove the cursor from the parent, the sub menu dissapears.
I have seen multiple answers but none of them worked, well I am not sure if they did not work or it is just me that didn't understand correctly as I am new to this.
Here is the CSS code:

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

And there is another problem and I think it is related to this one, I added an arrow to the menu but it isn't in the hover effect and I can't seem to understand why.
Here is the code:

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

<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>

1 个解决方案

#1

The problem for the sub-menu disappearing is that the sub-menu is not inside of the parent li. If you move the sub-menu into the parent li and change the css from selecting .sub-menu next to the li to the .sub-menu that is a child of the li, then it will work as you expect:

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

.navclass li:hover .sub-menu

Check it out here.

看看这里。

As for the arrow not being in the hover effect, the solution is very similar to the one I stated above. Move the arrow into the parent li.

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

#1