Древовидное сворачивающееся меню
 

Здравствуйте,

есть древовидная менюшка которая раскрывается при наведении и при наведении же прячется(это не очень удобно) как можно сделать чтобы при перемещении по меню по Подкатегория 1, 2, 3 и т.д. раскрыты были только элементы этой подкатегории, а остальные прятались через display="none" подозреваю нужно как то обходить все по циклу, но так чтобы не закрыть текущие.

<script type="text/javascript"> 
function iblock(cellid, blockid){
    
    var a = document.getElementById(cellid);
    if (a.style.display=="none") a.style.display="block";
        /*else a.style.display="none";*/
        
    var b = document.getElementById(blockid);
    if (b.style.background == "url(/img/str3.gif) no-repeat 5px 0px") b.style.background = "url(/img/str3.gif) no-repeat 5px -11px"
        else b.style.background = "url(/img/str3.gif) no-repeat 5px 0px";
        
         
}
</script>
<ul class="nav">
    <li><a href="#">Главная категория</a></li>
    <ul  id="c1">
        <li><a onmouseover="iblock('c2','b2');" href="#">Подкатегория 1</a></li>
    
        <ul id="c2">
            <li><a onmouseover="iblock('c3','b3');" href="#">Подкатегория 1.1</a></li>
            <ul style="display:none" id="c3">
                <li><a href="#">Подкатегория 1.1.1</a></li>
                <li><a href="#">Подкатегория 1.1.2</a></li>
            </ul>
            <li><a href="#">Подкатегория 1.2</a></li>
        </ul>
        
        <li><a onmouseover="iblock('c4','b4');" href="#">Подкатегория 2</a></li>
        <ul style="display:none" id="c4">
            <li><a href="#">Подкатегория 2.1</a></li>
            <li><a href="#">Подкатегория 2.2</a></li>
        </ul>    
        
        <li><a onmouseover="iblock('c5','b5');" href="#">Подкатегория 3</a></li>
        <ul style="display:none" id="c5">
            <li><a href="#">Подкатегория 3.1</a></li>
            <li><a href="#">Подкатегория 3.2</a></li>
        </ul>    
    </ul>
</ul>