CSS下拉菜单不起作用，子菜单消失

Question

我正面临问题，当我徘徊在父菜上时，sub菜单出现了，但是当我尝试选择子菜单中的一个项目并从父母那里删除光标，子菜单dispears。
我已经看到了多个答案，但是它们都没有起作用，好吧，我不确定他们是不起作用还是只是我不正确地理解的，因为我是新手。
这是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

sub-menu消失的问题是子菜单不在父级内。如果将子菜单移至父母li，然后将CSS从li旁边的.sub-menu更改为Li的子女，那么它将按照您的期望工作：

.navclass li:hover .sub-menu

在这里检查一下。

至于箭头没有悬停效应，该解决方案与我上面所述的箭头非常相似。将箭头移到父母li。