您的错误：

CSS：

 code> #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 a：hover {
 border：none; 
 color：black; 
 background-image：url（Images / mouse_over_background.gif）; 
 z-index：1; 
} 
 

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=""><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;
}

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;                                          
}