Верстка меню

[kolhoz]

Подскажите пожалуйста, как мне сверстать это меню правильно. При нажатии на пункт "Статьи" отображаются все подпункты всех пунктов, а мне нужно чтобы при нажатии на "Статьи" отображались только пункты "Города", "Страны", а при нажатии на страны отображались "Федеративные" и т.д.

 

Вот код меню со стилями:

<div id="navigation" class="row navigation">	<div class="moduletable">	<ul class="nav menu">		<li class="item-101 current active"><a href="/">Главная</a></li>		<li class="item-120"><a href="/kategorii-k2">Контакты</a></li>		<li class="item-139"><a href="/magazin">О нас</a></li>		<li class="item-142 divider deeper parent">			<span class="separator">Статьи</span>			<ul class="nav-child unstyled small">				<li class="item-140"><a href="/menyushka/podpunkt">Города</a></li>				<li class="item-141 deeper parent"><a href="/menyushka/podpunkt-2">Страны</a>					<ul class="nav-child unstyled small">						<li class="item-143 deeper parent"><a href="/menyushka/podpunkt-2/podpunkt-3">Федеративные</a>							<ul class="nav-child unstyled small">								<li class="item-144"><a href="/menyushka/podpunkt-2/podpunkt-3/podpunkt-4">Россия</a></li>							</ul>						</li>					</ul>				</li>			</ul>		</li>		<li class="item-172"><a href="/forum">Форум</a></li>		<li class="item-204"><a href="/otzyvy">Отзывы</a></li>	</ul>	</div></div><style>.menu ul{    display:none;    position:absolute;    top:30px;    left:0px;    background:#000;    width:200px;}.menu li{position:relative; float:left; padding:10px;}li:hover ul{display:list-item;}li:hover li{float:none;}li:hover li a{float:none;}.menu ul li:hover{background:#1b1b1b;}</style>

[pangurban]

http://jsfiddle.net/Pangurban/52tcadye/