HTML 子子菜单

Question

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

不幸的是，我必须使用一个在线工具来定义菜单，它是在下面的代码中编写的。 (menulevel1 和 menulevel2)

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

Answer 2

在自己的标签中关闭 menu1，与 menu2 相同。不要忘记关闭每个标签。

Answer 3

<ul>
        <li>
            <a href="">Birds</a>
            <ul>
                <li><a href="">Ratites</a></li>
                <li><a href="">Fowl</a></li>
                <li><a href="">Neoaves</a></li>
            </ul>
        </li>
        <li>
            <a href="">Mammals</a>
            <ul>
                <li><a href="">Monotremes</a></li>
                <li><a href="">Marsupials</a></li>
                <li><a href="">Placentals</a></li>
            </ul>
        </li>
        <li>
            <a href="">Reptiles</a>
            <ul>
                <li><a href="">Lizards and snakes</a></li>
                <li><a href="">Tortoises and turtles</a></li>
                <li><a href="">Crocodilians</a></li>
                <li><a href="">Tuatara</a></li>
            </ul>
        </li>
        <li>
            <a href="">Amphibians</a>
            <ul>
                <li><a href="">Frogs and toads</a></li>
                <li><a href="">Salamanders and newts</a></li>
                <li><a href="">Caecilians</a></li>
            </ul>
        </li>
    </ul>

在此应用 CSS，一切顺利