I am currently working on implementing a sublevel drop-down menu. While I have successfully created the first level of the menu, the second level always displays prominently when hovering over the first drop-down menu. My goal is to only show the second level when hovering over the first level. Any assistance or guidance provided would be highly appreciated. Below is the HTML code I am using:
HTML
<nav>
<ul>
<li><a href="#"><span></span> Home </a></li>
<li>
<a href="#"><span></span> Jewelry </a>
<ul>
<li>
<a href="#"><span></span> Rings </a>
<ul>
<li><a href="#">Silver</a></li>
<li><a href="#">Copper</a></li>
<li><a href="#">Bronze</a></li>
</ul>
</li>
<li><a href="#"><span></span> Pendants </a></li>
<li><a href="#"><span></span> Bracelets </a></li>
<li><a href="#"><span></span> Necklaces </a></li>
<li><a href="#"><span></span> Other </a></li>
</ul>
</li>
<li><a href="#"><span></span> Testimonials </a></li>
<li><a href="#"><span></span> Latest Offers </a></li>
<li><a href="#"><span></span> News </a></li>
<li><a href="#"><span></span> Contact Us </a></li>
</ul>
</nav>
CSS
nav {
background: url(texture.png);
width: 210px;
margin: 20px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
position: relative;
}
nav ul li ul li ul li {
position: block;
}
nav a {
color: #e8e8e8;
padding: 12px 0px;
display: block;
text-decoration: none;
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 {
background: RGBA(255,255,255,0.05);
color: #fff;
}
nav ul li:hover ul {
display: block;
}
nav ul ul {
position: absolute;
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);
}
nav span:before {
content: "";
width: 12px;
height: 2px;
background: #3a3b3b;
position: absolute;
left: 0px;
top: 5px;
}
nav span:after {
content: "";
width: 2px;
height: 12px;
background: #3a3b3b
position: absolute;
left: 5px;
top: 0;
}