[HTML & CSS] Dropdown Menu's

Peeeeeeeeeeynk · October 25, 2014

I have been practicing on how to make dropdown menu's the problem is I can't get my hover to work every time I want my sub menus to appear.

Please help. D:

Below is some code that I made on my drop down menu.

HTML

<body>

<nav>

<ul>

<ul>

</ul>

</ul>

</nav>

</body>

CSS

nav

{

background: black;

}

nav ul li a

{

color:white;

font-family:arial;

text-decoration: none;

display: block;

padding:10px;

text-align: center;

}

nav ul li

{

display:inline-block;

}

nav ul li a:hover

{

background-color: gray;

}

ul

{

margin-left:30px;

position: relative;

}

nav ul ul

{

display:none;

}

nav ul li:hover > ul

{

display: block;

}

ImBleu · October 25, 2014

the HTML part seems to be correct to me at least. Try unlinking the CSS to the HTML (which I assume you've linked already) and open the HTML. If it works like that then you've got a CSS error.

EDIT: I assume you could always just use an example code from something like w3schools.com too.

Hazy125 · October 25, 2014

First of all, I apologise for spelling/grammar or a downright wrong answer. I may have had one or two or two dozen to drink.

Anyways, li:hover > ul is applying the style to all children of the li tag and the ul doesn't look like it's actually nested inside the li tag, so the ul isn't a child of the li