CSS导航子菜单

Question

我的CSS代码不允许子导航保持打开，允许用户能够选择一个选项。 我错过了什么？ 我相信它与最后的CSS风格有关。 现在它显示你什么时候鼠标悬停。 一旦开始向下移动鼠标以选择一个选项，它就会消失。

请有人帮忙：

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

Answer 1

简单的bug

你的错误：

CSS：

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

Answer 2

我看了一下小提琴并纠正了丢失的</li>标签。 现在代码工作的方式我不会发现它在小提琴中工作正常。 我更新了小提琴： http ： //jsfiddle.net/CtPcA/1 。 背景图像是悬停时的紫色块，然后文本变为白色