如果上一个元素使用纯JavaScript悬停，则显示下一个同级元素

Question

我有这段html

ul { display:none }

<a href="#" class="hh-a-1 mm-listitem">test 1</a>
<a href="#" class="hh-a-1 mm-listitem">test 2</a>
<a href="#" class="hh-a-1 mm-listitem">test 3</a>
<ul class="hh-ul-1 mm-listitem">
<a href="#" class="hh-a-2 mm-listitem__text">sub 1</a>
</ul>
<a href="#" class="hh-a-1 mm-listitem">Test 4</a>
<ul class="hh-ul-1 mm-listitem">
<a href="#" class="hh-a-2 mm-listitem__text">sub 2</a>
</ul>

默认情况下，ul元素是隐藏的。

我试图实现a元素悬停时只显示作为下一个同级的ul元素。

例如，如果test 3链接已悬停，则具有sub 1链接的ul元素需要出现并在a和ul悬停时停留。

我没有那么多经验，所以任何帮助都将不胜感激。

Answer 1

看看相邻的兄弟组合子

我添加了焦点，这样你就可以保持UL打开

此外，UL中的a应该在li中。这使得制作子菜单变得有些困难

ul { display:none; position: absolute; top:50px }
a:hover + ul { display: block }
a:focus + ul { display: block }

<a href="#" class="hh-a-1 mm-listitem">test 1</a>
<a href="#" class="hh-a-1 mm-listitem">test 2</a>
<a href="#" class="hh-a-1 mm-listitem">test 3</a>
<ul class="hh-ul-1 mm-listitem">
<li><a href="#" class="hh-a-2 mm-listitem__text">sub 1</a></li>
</ul>
<a href="#" class="hh-a-1 mm-listitem">Test 4</a>
<ul class="hh-ul-1 mm-listitem">
<li><a href="#" class="hh-a-2 mm-listitem__text">sub 2</a></li>
</ul>