CSS navigation sub menu - html

Question

My CSS code is not allowing the sub nav to stay open allowing the user to be able to select an option. What am i missing? I believe it is something to do with the last CSS style. As it is now it shows when you mouse over. As soon as you start to move your mouse down to select an option it disappears.
Please could someone help:
HTML
<div id="navigation_bar">
<ul>
<li id="">Home</font></li>
<li>Beauty Treatments
<ul>
<li>Manicure & Pedicure</li>
<li>Gel Manicure & Pedicure</li>
<li>Waxing</li>
<li>Facials</li>
<li>Make-up</li>
<li>Eye Treatments</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;
}

Answer 1

Simple bug
Your error:
CSS:
#navigation_bar ul li a:hover{
border:none;
color:#ffffff;
background-image:url(Images/mouse_over_background.gif);
z-index:1;
}
What it should be:
#navigation_bar ul li a:hover{
border:none;
color:black;
background-image:url(Images/mouse_over_background.gif);
z-index:1;
}

Answer 2

I have had a look at the Fiddle and corrected the missing </li> tag. Now the code works the way im seeing not that it is working fine in the fiddle. I have updated the fiddle: http://jsfiddle.net/CtPcA/1. The background image is a purple block say on hover and the text then changes to white