Как сделать выпадающее меню

[voloxa89]

есть код

<ul id="ul1">
	<li id="bx_2037796212_355"><a href="/catalog/product/bar_accessories/">Барные аксессуары&nbsp;(98)</a></li>
<ul id='ul2'>	<li id="bx_2037796212_356"><a href="/catalog/product/bar_decorations/">Барные украшения&nbsp;(39)</a></li>
	<li id="bx_2037796212_357"><a href="/catalog/product/toothpicks_skewers_chopsticks_for_sushi/">Зубочистки, шампуры, палочки для суши&nbsp;(17)</a></li>
	<li id="bx_2037796212_358"><a href="/catalog/product/candles/">Свечи&nbsp;(42)</a></li>

</ul>	<li id="bx_2037796212_297"><a href="/catalog/product/household_chemicals/">Бытовая химия&nbsp;(241)</a></li>
<ul id='ul2'>	<li id="bx_2037796212_312"><a href="/catalog/product/soap/">Мыло&nbsp;(19)</a></li>
	<li id="bx_2037796212_310"><a href="/catalog/product/rinser/">Ополаскиватели&nbsp;(8)</a></li>
	<li id="bx_2037796212_313"><a href="/catalog/product/refreshers/">Освежители&nbsp;(14)</a></li>
	<li id="bx_2037796212_311"><a href="/catalog/product/bleachers/">Отбеливатели&nbsp;(18)</a></li>

	<li id="bx_2037796212_314"><a href="/catalog/product/perfumes_and_cosmetics/">Парфюмерия и косметика&nbsp;(6)</a></li>
	<li id="bx_2037796212_316"><a href="/catalog/product/other_bithimiy/">Прочее&nbsp;(1)</a></li>
	<li id="bx_2037796212_306"><a href="/catalog/product/funds_for_furniture/">Средства для мебели&nbsp;(6)</a></li>
	<li id="bx_2037796212_303"><a href="/catalog/product/means_for_cleaning_floors_and_carpets/">Средства для мытья полов и ковров&nbsp;(14)</a></li>
	<li id="bx_2037796212_298"><a href="/catalog/product/dishwashing_detergent/">Средства для мытья посуды&nbsp;(18)</a></li>

	<li id="bx_2037796212_305"><a href="/catalog/product/dishwasher_detergent1/">Средства для посудомоечных машин&nbsp;(6)</a></li>
	<li id="bx_2037796212_300"><a href="/catalog/product/tools_for_plumbing_and_tile/">Средства для сантехники и керамической плитки&nbsp;(22)</a></li>
	<li id="bx_2037796212_304"><a href="/catalog/product/tools_for_microwave_ovens_stoves_kitchen_and_office_equipment/">Средства для СВЧ печей, плит, кухни и оргтехники&nbsp;(22)</a></li>
	<li id="bx_2037796212_302"><a href="/catalog/product/means_for_removing_blockages_in_pipes_and/">Средства для труб и удаления засоров&nbsp;(8)</a></li>
	<li id="bx_2037796212_301"><a href="/catalog/product/tools_for_toilets/">Средства для туалетов&nbsp;(9)</a></li>

	<li id="bx_2037796212_308"><a href="/catalog/product/means_for_descaling/">Средства для удаления накипи&nbsp;(5)</a></li>
	<li id="bx_2037796212_315"><a href="/catalog/product/insect/">Средства от насекомых&nbsp;(2)</a></li>
	<li id="bx_2037796212_307"><a href="/catalog/product/wipers/">Стеклоочистители&nbsp;(16)</a></li>
	<li id="bx_2037796212_309"><a href="/catalog/product/washing_powders/">Стиральные порошки&nbsp;(41)</a></li>
	<li id="bx_2037796212_299"><a href="/catalog/product/universal_detergents/">Универсальные моющие средства&nbsp;(6)</a></li>

</ul>	<li id="bx_2037796212_399"><a href="/catalog/product/stationery/">Канцтовары&nbsp;(121)</a></li>
<ul id='ul2'>	<li id="bx_2037796212_401"><a href="/catalog/product/forms/">Бланки&nbsp;(21)</a></li>
	<li id="bx_2037796212_400"><a href="/catalog/product/paper/">Бумага&nbsp;(18)</a></li>

нужно чтобы <ul id="ul2"> был скрыт
а при наведении на какой ни будь <li> из <ul id="ul1"> раскрывался пункт меню <ul id="ul2"> относящийся к этому пункту.
делаю такой код раскрываются все пункты сразу

$("#ul2 li").hide();
	$("#ul1").hover(function(){
		$('#ul2 li').toggle('slow');});

Помогите решить вопрос. желательно с комментариями.

[Black_Prince]

1. Id у элементов должны быть УНИКАЛЬНЫМИ!!! (id='ul2' у кучи ул-ек это не правильно)
2. для jquery есть уже очень много плагинов для выпадающих меню (гугль поиск в помощь). Я например пользуюсь superfish.

Выглядит это примерно так:

<ul class="nav">
		    <li><a href='#'  class="a_header"><?php echo $language;?></a>
			<ul>
			    <li><a href="./index.php?route=common/home&language=en">English</a></li>
			    <li><a href="./index.php?route=common/home&language=ru">Русский</a></li>
			    <li><a href="./index.php?route=common/home&language=ua">Україньска</a></li>
			</ul>
		    </li>
		</ul>

$('.nav').superfish({
		hoverClass	 : 'sfHover',
		pathClass	 : 'overideThisToUse',
		delay		 : 0,
		animation	 : {height: 'show'},
		speed		 : 'normal',
		autoArrows   : false,
		dropShadows  : false,
		disableHI	 : false, /* set to true to disable hoverIntent detection */
		onInit		 : function(){},
		onBeforeShow : function(){},
		onShow		 : function(){},
		onHide		 : function(){}
	    });

	    $('.nav').css('display', 'block');

[voloxa89]

Id у элементов должны быть УНИКАЛЬНЫМИ!!! - У меня списки выводятся в цикле и ни как id не прописать для каждого ula. Читал в нете что можно получить id элемента на который наводишь так
var Perem = this.id;
Это я получу идентификатор на который навел.
А как получить идентификатор списка который к нему относится(список который должен появится)?

[SkyLight]

Что именно вы не поняли из фразы про уникальные ID? Да и к тому же вам дали пример готового решения вашей проблемы...

[Black_Prince]

Ну скиньте цикл, в котором создаются UL. Хочу посмотреть как это, когда "ни как id не прописать" . Да, если это происходит через пых - то код создания списков тоже в студию.

>>А как получить идентификатор списка который к нему относится(список который должен появится)?

Если я правильно понял о чем идет речь - то: $(this).children("li").attr('id');
или $(this).children("ul").attr('id'); Смотря что вы считаете списком, который должен появиться.

З.Ы. с повторяющимися ID нет гарантии что код будет работать корректно.

[voloxa89]

Почти сделал вот код при наведении список показывается а как сделать чтобы список пропадал после увода мыши?

$("#ul1 li").hover(	function(){ 
	 								$(this).next().slideDown(100);
			 		},
    				function(){
	 					$("#ul2 li").blur();
			  						});

Пробовал и blur и remove не помогает

[Black_Prince]

mouseout??? возможно.

[voloxa89]

mouseout??? возможно.
да возможно.
но я пробовал ничего не получается. как сделать чтобы после увода мыши все события становились на свои места