HTML Sub Submenu

I want to create a Menu Bar on a website with sub submenus. I am not able to fix the following problems: 1. The sub submenu items appear in the same box as the submenu items 2. the sub submenu items are always taking space even though they are invisible 3. the sub submenu items show when you hover the submenu box but they should only show up when you hover the menu item they belong to.

Unfortunately I have to use an online tool that defines the menu the way it is written in the code below. (menulevel1 and 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>

Please let me know what I am doing wrong. I really appreciate your help.

Code: https://jsfiddle.net/TheBB23/q6gncy07/

enter code here

Thank you

3 answers

  • answered 2019-09-22 06:15 Sophie Enax

    nest menu level 2 inside of the subject li.

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

  • answered 2019-09-22 06:54 Onomic

    Close menu1 in a tag of its own and same for menu2. Don't forget to close each tags.

  • answered 2019-09-22 17:44 Diana

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

    Apply CSS on this and you are good to go