Sous-menu HTML

Question

Je veux créer une barre de menu sur un site web avec des sous-menus. Je ne parviens pas à résoudre les problèmes suivants : 1. Les éléments des sous-menus apparaissent dans la même case que les éléments du sous-menu 2. les éléments des sous-menus prennent toujours de la place, même s'ils sont invisibles Les éléments des sous-menus s'affichent lorsque vous survolez la case du sous-menu, alors qu'ils ne devraient s'afficher que lorsque vous survolez l'élément de menu auquel ils appartiennent.

Malheureusement, je dois utiliser un outil en ligne qui définit le menu de la manière dont il est écrit dans le code ci-dessous. (menulevel1 et 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>

Veuillez me dire ce que je fais de mal. J'apprécie vraiment votre aide.

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

enter code here

Merci.

Answer 1

Emboîter le niveau 2 du menu à l'intérieur du sujet 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>`

Answer 2

Fermez le menu1 dans une balise qui lui est propre et de même pour le menu2. N'oubliez pas de fermer chaque balise.

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>

Appliquez le CSS sur ce point et vous êtes prêt à partir.