CODEWITHSUNDEEP
htmlcssdrop-down-menunavdropdown
StuiterSlurf
StuiterSlurf

Reputation: 2572

HTML5 tag dropdown menu

I am working on a HTML5 dorpdown menu for fun. I was reading on W3Schools about a dropdown menu but all of them are using CSS classes and id's.

the HTML code is:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Super cool drop down menu</title>
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <nav>
        <ul>
            <li><a href="#Home">Home</a></li>
            <li>
                <a href="#">Super cool drop down menu!</a>
                <ul>
                    <li><a href="#Link1">Link 1</a>
                    <li><a href="#Link2">Link 2</a>
                    <li><a href="#Link3">Link 3</a>
                </ul>
            </li>
            <li><a href="#Contact">Contact</a></li>
        </ul>
    </nav>


    <h3>Super cool dropdown menu</h3>
    <p>Ga met je muis op Super cool dorp down menu! staan om de linkjes te tonen.</p>
</body>
</html>

the style.css has the following code:

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

nav ul li {
    float: left;
}

nav ul li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

nav ul li a:hover, nav ul li ul li {
    background-color: #f1f1f1;
    display: block;
}

nav ul li ul {
    display: inline-block;
}

nav ul li ul li {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

nav ul li ul li a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

I think I got it almost working but it doesn't show the second ul li elements. Can anyone tell me what I am doing wrong?

Upvotes: 1

Views: 898

Answers (1)

pulekies
pulekies

Reputation: 924

The main issue is that you are setting the nested list items to "display: none".

nav ul li ul li {
    display: none;
    ...
}

If you want them to appear when the parent li element is hovered use something like the following css:

nav ul li:hover ul li {
    display: block;
    ...
}

I made a jsfiddle to play around with it:

https://jsfiddle.net/1zq1s9ea/

There may have been a couple other minor changes that I made such as closing all of the the 'li' tags, but the one you needed was the one I mentioned above.

Upvotes: 2

Related Questions