I am having trouble with my CSS code regarding the sub navigation menu. It seems to close as soon as I try to select an option. I suspect that there might be something wrong with the last CSS style. Currently, it only shows when you hover over it but disappears when you move your mouse down to choose an option.
Could anyone please assist me with this?
HTML
<div id="navigation_bar">
<ul>
<li id=""><a href="">Home</font></a></li>
<li><a href="Beauty_treatments.html">Beauty Treatments</a>
<ul>
<li><a href="">Manicure & Pedicure</a></li>
<li><a href="">Gel Manicure & Pedicure</a></li>
<li><a href="">Waxing</a></li>
<li><a href="">Facials</a></li>
<li><a href="">Make-up</a></li>
<li><a href="">Eye Treatments</a></li>
</ul>
</div>
CSS
#navigation_bar ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#navigation_bar ul li {
float: left;
}
#navigation_bar ul li a {
display: block;
padding: 0 20px 0 20px;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #222;
font-weight: bold;
text-decoration: none;
line-height: 36px;
border: none;
}
#navigation_bar ul li a:hover {
border: none;
color: #ffffff;
background-image: url(Images/mouse_over_background.gif);
z-index: 1;
}
#navigation_bar ul li ul li {
float: none;
z-index: 2;
}
#navigation_bar ul li ul {
position: absolute;
display: none;
}
#navigation_bar ul li:hover ul {
display: block;
}