I am experiencing an issue with my menu bar that has three items with drop down menus. When I hover over the menu bar, the drop down menu appears, but it disappears when I try to move my mouse to select something from the drop down menu. I suspect that there might be a problem in my CSS code, but I'm not entirely sure what it is. Here is the snippet of my CSS code:
body {
background: url(background.jpg);
font-family: Georgia;
margin: 10;
padding: 10;
}
.main {
width: 1000px;
margin: 0 auto;
background: #000;
color: #fff;
}
.main > div {
height: 200px;
margin: 10px;
}
div.bottom {
height: 0;
clear: both;
margin: 0;
}
.main .head {
height: 100px;
color: #fff;
line-height: 100px;
}
h1 {
font-size: 30px;
font-weight: bold;
margin: 0;
}
h5 {
color: #000;
}
.main .page {
min-height: 500px;
height: auto;
}
.main .foot {
height: 70px;
text-align: center;
line-height: 70px;
}
.span_1 {
width: 800px;
}
.span_2 {
width: 990px;
}
div.menu {
height: 50px;
line-height: 50px;
background: #000;
color: #fff;
}
.menu a:link,
.menu a:visited {
color: #000;
text-decoration: none;
padding: 0 10px;
}
.menu ul,
.menu li,
.menu h5,
.menu .mega-drop {
list-style: none;
margin: 0;
padding: 10;
background: #fff;
}
.menu li {
position: relative;
}
.menu > ul > li {
float: left;
border-right: solid 1px;
}
.menu > ul > li > ul {
position: absolute;
left: 0;
top: 60px;
width: 400px;
z-index: 1;
display: none;
}
.menu > ul > li > .mega-drop {
position: absolute;
left: 0;
top: 60px;
z-index: 1;
width: 400px;
display: none;
}
.menu > ul > li > .mega-drop > .mega-drop-column {
float: left;
width: 200px;
}
.menu > ul > li > ul > li > ul {
position: absolute;
left: 400px;
top: 0;
width: 400px;
z-index: 1;
display: none;
}
.menu li:hover {
background: #3f0;
}
.menu li:hover > ul,
.menu li:hover > .mega-drop {
display: block;
}