2

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

2
  • If you can refactor the html code you can do it this way: jsfiddle.net/dp3vh67y/1 , if you can't, you can access to .dropdown-menuvia javascript and wrap the .menulevel2 items with a ul, so you can style their container.
    – mulsun
    Sep 22, 2019 at 1:05
  • Unfortunately I am not able to edit the HTML code because I am running a tool on the website that generates the HTML responsible for the part of the HTML code showcased above. Is there an option to do it without changing the HTML but adding some Javascript or CSS?
    – BB23
    Sep 23, 2019 at 22:00

3 Answers 3

0

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>`
1
  • Unfortunately I am not able to edit the HTML code because I am running a tool on the website that generates the HTML responsible for the part of the HTML code showcased above. Is there an option to do it without changing the HTML but adding some Javascript or CSS?
    – BB23
    Sep 23, 2019 at 22:02
0

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

1
  • Unfortunately I am not able to edit the HTML code because I am running a tool on the website that generates the HTML responsible for the part of the HTML code showcased above. Is there an option to do it without changing the HTML but adding some Javascript or CSS?
    – BB23
    Sep 23, 2019 at 22:02
0
<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

1
  • Thank you for your reply. Unfortunately I am not able to edit the HTML code because I am running a tool on the website that generates the HTML responsible for the part of the HTML code showcased above. Is there an option to do it without changing the HTML but adding some Javascript or CSS?
    – BB23
    Sep 23, 2019 at 22:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.