menu css3 hovering over links - html

Question

I'm trying to make my first menu by hovering over links but when I hover, the ul within the first ul isn't showing.
JSfiddle: http://jsfiddle.net/2FLMD/
So basically I have a nav with a ul and links within that. Then I have another ul within the first link called Log In. Inside that second ul are two links with one input elements inside each.
HTML
<nav>
<ul>
<li>LOG IN</li>
<ul>
<li>Username: <input type="text" name="username"> </li>
<li>Password: <input type="password" name="password"></li>
</ul>
<li>SIGN UP</li>
<li>CUSTOMER SERVICE</li>
<li>SPECIALS</li>
<input type="search" name="search">
</ul>
</nav>
CSS
nav ul{
background:#1C1D21;
margin:0;
padding:0;
}
nav ul li{
display:inline-block;
color:white;
padding:10px 20px;
border-right:1px solid white;
}
nav ul li a{
color:white;
text-decoration:none;
}
nav ul ul {
position:absolute;
border-top:1px solid red;
}
/*Where the problem seems to occur */
nav ul ul li {
display:block; /*change to display to none */
}
/*The hovering part */
nav ul li:hover > ul li{
display:block;
}

Answer 1

The problem is in the html structure as your sub ul is not containing in the li and is existing as a sibling to the li elements:
<li>LOG IN
<ul>
<li>Username: <input type="text" name="username"></li>
<li>Password: <input type="password" name="password"></li>
</ul>
</li>
Example

Answer 2

You want to put the sub list (sub nav) inside your main list (main nav)
http://jsfiddle.net/doiks14/2FLMD/4/
The selector you have nav ul li:hover > ul li indicates that nav ul li has child of ul li
I simply changed the mark up to reflect what you're trying to do.
<li>
LOG IN
<ul>
<li>Username: <input type="text" name="username"></li>
<li>Password: <input type="password" name="password"></li>
</ul>
</li>
Also note that this is the semantically correct way of creating a list.

Answer 3

Change > to + like this:
nav ul li:hover + ul li{
display:block;
}
Demo.
Note that the ul (you want to show) is not a direct child of the li which you hover on, it's just an adjacent sibling of that li, so we should use + instead of >.

Answer 4

There are several errors on yout HTML markup. Here is a quick fix

Answer 5

Your selector wasn't formed correctly, try this:
nav ul:hover ul li{
display:block;
}
ref: http://jsfiddle.net/2FLMD/2/