Confused about my dropdown navbar

HTML-CSS
1

I was trying to follow the instruction on w3schools to create a dropdown menu.

In the example they use <div> to create a dropdown container and a div for the dropdown content which contains <a> .

Now I’ve read on google that when I place the code between an <ul> it is invalid.

Should I use <span> or just <li> ?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
   <nav>
        <ul>
            <div class="dropdownContainer"> 
                <li class="dropdownButton"><a href="#">Asiel</a></li>
                    <div class="dropdownContent">
                        <a href="#">Tarieven</a>
                        <a href="#">Onze katten</a>
                        <a href="#">Onze honden</a>
                        <a href="#">Afstandsbeleid</a>
                        <a href="#">Gevonden of vermist</a>
                        <a href="#">Plaatsingsvoorwaarden</a>
                    </div>
            </div>
           
        </ul>
   </nav>
   <div class="innernav"></div>

    
</div>
    
    <script src="script.js"></script>
</body>
</html>
2

Hey!
If you’re using ul then semantically it’s incorrect to have a div as a direct child of the ul. That’s why google is telling you it’s invalid.
So try using li element as the direct child of the ul and add the divs inside those.
I hope this helps!

3

Hii You have tried well, But You can put your nav element inside a div.

Or else when you are using nav element then in that case you no need to put your nav inside a div.

But if you want then here is the correct syntax you can do use.

<div>
    <nav>
       <ul>
         <li></li>
       </ul>
    </nav>
</div>

Hope You Understand.

1 Like
4

Thankyou so much for helping me. I’ll try my best to recreate the menu again! :slight_smile: