CSS and HTML coding - html

Question

I am trying to make a sublevel drop down menu. I have successfully gotten the first menu but the second menu sticks out no matter what when you mouse over the first drop down menu. I want it so that the second level only appears when you mouse over the first level. Any help would be greatly appreciated. The following is my html code:
HTML
<nav>
<ul>
<li><span></span> Home </li>
<li>
<span></span> Jwewlry
<ul>
<li>
<span></span> Rings
<ul>
<li>Silver</li>
<li>Copper</li>
<li>Bronze</li>
</ul>
</li>
<li><span></span> Pendants </li>
<li><span></span> Bracelets </li>
<li><span></span> Necklaces </li>
<li><span></span> Other </li>
</ul>
</li>
<li><span></span> Testimonials </li>
<li><span></span> Latest Offers </li>
<li><span></span> News </li>
<li><span></span> Contact Us </li>
</ul>
</nav>
CSS
nav {
/* Repeating background image */
background: url(texture.png);
width: 210px;
margin: 20px;
}
nav ul {
/* Remove bullet points */
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
/* Any child positioned absolutely will be positioned relative to this */
position: relative;
}
nav ul li ul li ul li {
position: block;
}
nav a {
color: #e8e8e8;
padding: 12px 0px;
/* Fill all available horizontal space */
display: block;
/* Remove underline */
text-decoration: none;
/* New CSS3 animations: apply transition to background property, taking 1s to change it */
transition: background 1s;
-moz-transition: background 1s;
-webkit-transition: background 1s;
-o-transition: background 1s;
font-family: tahoma;
font-size: 13px;
text-transform: uppercase;
padding-left: 20px;
}
nav a:hover {
/* RGBA background for transparancy: last number(0.05) is the transparency */
background: RGBA(255,255,255,0.05);
color: #fff;
}
nav ul li:hover ul {
/* When list item is hovered, display UL nested within. */
display: block;
}
nav ul ul {
/* Remove element from document flow */
position: absolute;
/* Position relative to its parent <li> */
left: 210px;
top: 0;
border-top: 1px solid #e9e9e9;
display: none;
}
nav ul ul li {
width: 200px;
background: #f1f1f1;
border: 1px solid #e9e9e9;
border-top: 0;
}
nav ul ul li a {
color: #a8a8a8;
font-size: 12px;
text-transform: none;
}
nav ul ul li a:hover {
color: #929292;
}
nav span {
width: 12px;
height: 12px;
background: #fff;
display: inline-block;
float: left;
margin-top: 3px;
margin-right: 20px;
position: relative;
transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-webkit-transition: all 0.5s;
}
nav a:hover span {
background: #7d2c41;
transform: rotate(90deg);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
/* Horizontal line */
nav span:before {
content: "";
width: 12px;
height: 2px;
background: #3a3b3b;
position: absolute;
left: 0px;
top: 5px;
}
/* Vertical line */
nav span:after {
content: "";
width: 2px;
height: 12px;
background: #3a3b3b;
position: absolute;
left: 5px;
position: top;
}

Answer 1

Simply change the hover selector to this:
nav ul li:hover > ul
This way only the first child ul element is visible.