Реализация всплывающего меню

[Digo]

Доброго времени суток, имеется меню древовидное, структура там такая что во всех пунктах неактивны стоит display:none, в активных если есть display:none отсутствует(это отрабатывается системой управления при переходе) есть задумка сделать чтобы при наведении на родительскую категорию отображались дочерние подкатегории (как бы раскрытие дерева при наведении) или банальное всплывающее меню сбоку. Есть какие идеи как это реализовать более грамотно желательно без серьезных изменений в структуре меню, т.е. подстроить под структуру, сперва думал сделать чистое css меню но все портит display:none не получилось по hover его включать, я так понимаю с ним только через скрипт работать нужно...

<ul>
	<li>
	<div class="link_container">
		<a href="#">Главная категория</a>
	</div>
	</li>
<ul id="c1">
	<li>
	<div class="link_container">
		<a href="#">Подкатегория 1</a>
	</div>
	</li>
	
	<ul id="c2">
		<li>
			<div class="link_container"><a href="#">Подкатегория 1.1</a></div>
		</li>
		<ul style="display:none" id="c3">
			<li>
				<div class="link_container"><a href="#">Подкатегория 1.1.1</a></div>
			</li>
	
			<li>
				<div class="link_container"><a href="#">Подкатегория 1.1.2</a></div>
			</li>
		</ul>

		<li>
			<div class="link_container"><a href="#">Подкатегория 1.2</a></div>
		</li>
	</ul>
	
	<li>
		<div class="link_container">
		<a href="#">Подкатегория 2</a>
		</div>
	</li>
	<ul style="display:none" id="c7">
		<li>
			<div class="link_container"><a href="#">Подкатегория 2.1</a></div>
		</li>
		<li>
			<div class="link_container"><a href="#">Подкатегория 2.2</a></div>
		</li>
	</ul>	

</ul>
</ul>

[ksa]

все портит display:none не получилось по hover его включать, я так понимаю с ним только через скрипт работать нужно...

Это смотря где указано это свойство... Т.е. все дело в приоритетах ЦСС.

[Digo]

указывается прям в коде системы управления при генерации меню <ul style="display:none" id="c7">

[ksa]

<ul style="display:none" id="c7">

Такое можно "перебить" только скриптом... Или перестать использовать такую порочную практику.

[Digo]

да я понял, вообщем очистил код от шелухи сделал через скрипт, одно не могу понять как закрывать при перемещении по Подкатегориям 1.1, 1.2 и т.д. остальные открытые, наводить повторно для скрытия не нравится, а так получается при перемещении по меню оно все раскрывается...

<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); /*для себя)*/
	
}

</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="#">Подкатегория 2</a></li>
		<ul style="display:none" id="c5">
			<li><a href="#">Подкатегория 2.1</a></li>
			<li><a href="#">Подкатегория 2.2</a></li>
		</ul>	

	</ul>
</ul>

[ksa]

одно не могу понять как закрывать при перемещении по Подкатегориям 1.1, 1.2 и т.д.

Есть масса реализаций деревьев на чистом ЦСС - возьми их, если со скриптами не умеешь.