单击时隐藏子导航UL

我正在开发一个具有辅助导航的网站，当用户将鼠标悬停在主导航标题上时，辅助导航会下降。我希望这些下拉列表表现得更像一个"正常"下拉列表，点击后它就会消失。

通常情况下，这不会是一个问题，但由于该网站依赖于锚定链接进行二次导航，因此在使用后下拉列表会一直存在。本身并不是很烦人，但我更希望它的行为更像人们通常期望的下降行为。

不幸的是，我在jQuery/javascript方面的能力还不够，而且我还不够。

如有任何协助，我们将不胜感激。

这是Javascript：

function closeList1() {
    var list = document.getElementById("list1");
    if (list.style.display == "block"){
        list.style.display = "none";
    }
}
function closeList2() {
    var list = document.getElementById("list2");
    if (list.style.display == "block"){
        list.style.display = "none";
    }
}

HTML。。。

<ul class="nav">
    <li>
        <a href="#first" onClick="closeList1">FIRST</a>
        <ul class="first" onClick="closeList1" id="list1">
            <li><a href="#firstone">ONE</a></li>
            <li><a href="#firsttwo">TWO</a></li>
            <li><a href="#firstthree">THREE</a></li>
            <li><a href="#firstfour">FOUR</a></li>
        </ul>
    </li>
    <li>
        <a href="#second" onClick="closeList2">SECOND</a>
        <ul class="second" onClick="closeList2" id="list2">
            <li><a href="#secondone">ONE</a></li>
            <li><a href="#secondtwo">TWO</a></li>
            <li><a href="#secondthree">THREE</a></li>
            <li><a href="#secondfour">FOUR</a></li>
        </ul>
    </li>
</ul>

和CSS。。。

ul.nav li ul{
    list-style:none;
    padding: 0;
    margin: 0;
    position:absolute;
    display: block;
    left:-9999px;
}
ul.nav li ul li{
    float:none;
    padding: 0;
    margin: 0;
    display: block;
}
ul.nav li ul li a{
    white-space: nowrap;
    margin: 0;
    padding: 0;
    display: block;
}
ul.nav li:hover ul{
    left:0; 
    top: 0;
}

不管怎样，谢谢你查看它，也谢谢你能提供的任何帮助。