HTML 子菜单

Question

我想在带有子​​子菜单的网站上创建一个菜单栏。我无法解决以下问题:1.子子菜单项与子菜单项出现在同一个框中2.子菜单项总是占用空间，即使它们是不可见的3. 当您将鼠标悬停在子菜单框上时，子子菜单项会显示，但只有当您将鼠标悬停在它们所属的菜单项上时，它们才会显示。

不幸的是，我必须使用一个在线工具，该工具按照下面代码中的编写方式定义菜单。 (菜单级别 1 和菜单级别 2)

<ul class="dropdown-menu">
<li class="menulevel1"><a class="" href="#>Timetable</a></li>
<li class="menulevel1"><a class="" href="#">Subjects</a></li>
<li class="menulevel2"><a class="" href="#">Chemistry</a></li>
<li class="menulevel2"><a class="" href="#">Maths</a></li>
<li class="menulevel2"><a class="" href="#">PE</a></li>
<li class="menulevel1"><a class="" href="#">Food</a></li>
<li class="menulevel1"><a class="" href="#">Drinks</a></li>

请让我知道我做错了什么。非常感谢你的帮助。

代码: https://jsfiddle.net/TheBB23/q6gncy07/

enter code here

谢谢

Answer 1

在主题 li 内嵌套菜单级别 2。

    `<li class="menulevel1"><a class="" href="#">Subjects</a>
    <ul>
    <li class="menulevel2"><a class="" href="#">Chemistry</a></li>
    <li class="menulevel2"><a class="" href="#">Maths</a></li>
    <li class="menulevel2"><a class="" href="#">PE</a></li>
    </ul>
    </li>`