So I'm trying my hands at a css menu and I have a simple bug that I cannot fix and haven't found any help searching for it. The issue is that when I hover over a drop down menu the parent link stays highlighted and the text reverts back to the original color. Hopefully that explains it. Here's the css code, I'm sure it's a matter of adding something or fixing a line of code. You can check out the issue here, everything works fine until you visit a submenu (like in BAR or Info).
#nav, #nav ul {
text-align: center;
text-size:16px;
float: left;
width: 750px;
height: 20px;
list-style: none;
line-height: 1;
background: white;
padding: 0;
border: solid #000;
border-width: 0px;
border-bottom-width: 1px;
margin: 0;
background-image: url('/images/bg.gif');
}
#nav a {
display: block;
width: 75px;
height: 20px;
color: #0000FF;
text-decoration: none;
}
#nav a:hover {
display: block;
width: 75px;
height: 20px;
color: #FFF;
}
#nav li {
float: left;
padding: 0;
width: 75px;
}
#nav li ul { /*sub menu */
position: absolute;
left: -999em;
height: auto;
width: 75px;
border: solid #000;
border-width: 0px;
border-bottom-width: 1px;
border-top-width: 1px;
background-image: url('/images/submenu_bg.png');
}
#nav li li {
width: 75px;
}
#nav li ul a {
width: 75px;
}
#nav li ul ul {
margin: -1.75em 0 0 14em;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
height: 20px;
background: #0000FF;
}