Вертикальное меню 2 уровневое

[realgleb]

Ребят такой вопрос! Есть меню! пи клике на ссылку появляется его подменю:

кат1
....кат1.1
....кат1.2
кат2
кат3
кат4

<script type="text/javascript">
		function ShowOrHide(obj) 
		{			
			var ul = document.getElementById('child');									
			ul.style.display = (ul.style.display!='block')?('block'):('none');
		}
</script>
<ul>					
					<li><a href="#" onclick="ShowOrHide(this)">Женская косметика</a></li>					
						<ul id="child">
							<li><a href="#">Сладкий аромат</a></li>
							<li><a href="#">Кислый аромат</a></li>
						</ul>
					<li><a href="#" onclick="ShowOrHide(this)">Мужская косметика</a></li>
						<ul id="child">
							<li><a href="#">Сладкий аромат1</a></li>
							<li><a href="#">Кислый аромат1</a></li>
						</ul>					
				</ul>

беда в том что при клике женская косметика появляется список который под ним находится, а при клике Мужская косметика должен появиться список соответственно относящийся к нему, но появляется первый! Надеюсь понятно объяснил! спасибо за внимание

[Aetae]

<script type="text/javascript">
        function ShowOrHide(obj)
        {          
            var ul = obj.parentNode;
            while((ul=ul.nextSibling)&&ul.nodeType !== 1);
            if(ul&&ul.tagName === 'UL') ul.style.display = (ul.style.display!='block')?('block'):('none');
        }
</script>
<ul>                 
                    <li><a href="#" onclick="ShowOrHide(this)">Женская косметика</a></li>                  
                        <ul>
                            <li><a href="#">Сладкий аромат</a></li>
                            <li><a href="#">Кислый аромат</a></li>
                        </ul>
                    <li><a href="#" onclick="ShowOrHide(this)">Мужская косметика</a></li>
                        <ul>
                            <li><a href="#">Сладкий аромат1</a></li>
                            <li><a href="#">Кислый аромат1</a></li>
                        </ul>                
                </ul>

[realgleb]

спасибо огромное!