I'm encountering an issue with the CSS for my menu.
Here is a screenshot of the dropdown menu:
Whenever I hover over the submenu, it drops down along with the parent menu container. Please take a look and let me know what might be causing this problem. Thanks for your assistance!
This is the CSS code I am using:
#menu {
width: 100%;
display: block;
overflow: auto;
background: #fff;
box-shadow: 0px 0px 3px #999;
list-style-type: none;
margin: 0 auto;
padding: 0;
position: relative;
z-index: 20;
}
#menu li {
display: inline-block;
float: left;
margin-right: 1px;
}
#menu li a {
display: block;
min-width: 120px;
padding: 10px 3px;
text-align: center;
line-height: 32px;
font: bold 16px Lato, Helvetica, Arial, sans-serif;
color: #333;
background: #fff;
text-decoration: none;
border-right: 1px solid #ececec;
text-transform: uppercase;
}
#menu li a:hover {
background: #ececec;
}
/*
Sub Menu (drop down)
*/
#menu li ul {
display: none;
}
#menu li ul li {
display: block;
float: none;
}
#menu li ul li:hover {
background: yellow;
display: block;
float: none;
top: 50px;
}
#menu li ul li a {
background: yellow;
width: 150px;
top: 50px;
min-width: 100px;
padding: 0 20px;
text-transform: none;
}
#menu li:hover ul {
width: 150px;
display: block;
opacity: 1;
visibility: visible;
}
Additionally, here is the live demo on Fiddle: http://jsfiddle.net/Fc69z/