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

我面临一个问题，当我将鼠标悬停在父菜单上时，会出现子菜单，但当我尝试选择子菜单中的一个项目并从父菜单中删除光标时，子菜单会消失。
我见过多个答案，但没有一个有效，我不确定这些答案是否有效，或者只是我没有正确理解，因为我是新手。
以下是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>

pvp教程






▼

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

.navclass li:hover .sub-menu

看看吧

---

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

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

.navclass li:hover .sub-menu

看看吧

---

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

缺少一个关闭缺少一个关闭