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