I have recently added a drop down menu to my website... well, in the works of adding a drop down menu to my website. I have the list displayed horizontally but the drop down portions of the list are not.. dropping down. I was wondering if someone would be able to take a look and tell me what I am doing wrong?
Thanks, here is my code.
HTML
<ul id="main-nav">
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<ul>
<li><a href="#">Apparel</a></li>
<li><a href="#">Gloves</a></li>
<li><a href="#">Punching Bags</a></li>
<li><a href="#">Protection</a></li>
<li><a href="#">Accessories</a></li>
</ul>
<li><a href="#">Wholesales</a></li>
<ul>
<li><a href="#">Equipment Catalogue</a></li>
<li><a href="#">Wholesale Inqueries</a></li>
</ul>
<li><a href="#">Contact</a></li>
<ul>
<li><a href="#">Direct Contact</a></li>
<li><a href="#">YouTube Channel</a></li>
<li><a href="#">LinkedIn Page</a></li>
<li><a href="#">Facebook Page</a></li>
</ul>
</ul>
CSS
#main-nav,
#main-nav ul {
list-style: none;
}
#main-nav {
float: left;
}
#main-nav > li {
float: left;
}
#main-nav li a {
display: block;
height: 25px;
line-height: 2em;
padding: 0 1.5em;
text-decoration: none;
}
#main-nav ul {
position: absolute;
display: none;
z-index: 999;
}
#main-nav ul li a {
width: 80px;
}
#main-nav li:hover ul {
display: block;
}
/* Main menu
------------------------------------------*/
#main-nav {
font-family: Arial;
font-size: 12px;
background: #880202;
}
#main-nav > li > a {
color: #fffff;
font-weight: bold;
}
#main-nav > li:hover > a {
background: #c90000;
color: #ffffff;
}
/* Submenu
------------------------------------------*/
#main-nav ul {
background: #880202;
}
#main-nav ul li a {
color: #ffffff;
}
#main-nav ul li:hover a {
background: #c90000;
}