выпадающее многоуровневое меню

[Vasilk]

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

вот что я пробую например:

http://realizant.narod.ru/oborudovanie-dlj...lmonologii.html

вот - если наводим на "каталог продукции" вниз выпадает меню, наводим на любую кнопку этого меню выпадает под меню.

соответственно таким образом реализовано:

				<li><a href="oborudovanie-dlja-pulmonologii.html" class="current" class="menulink"><strong>Каталог продукции</strong></a><span>02</span>


			<ul>
			<li><a href="#">артериальная ригидность</a>
				<ul><li><a href="#">Pulse Trace PCA 2</a></li><li><a href="#">Pulse Trace PWV</a></li></ul>
			  </li>
			<li><a href="#">газоанализаторы</a>
				<ul><li><a href="#">smoke check</li><li><a href="#">micro co</a></li></ul>   
			  </li>
			<li><a href="#">пикфлоуметры</a>
				<ul><li><a href="#">MicroPeak пикфлоуметр</a></li></ul>   
			  </li>
			<li><a href="#">программное обеспечение</a> 
				<ul><li><a href="#">spida 5</li><li><a href="#">spida xpert</a></li><li><a href="#">cobra</a></li><li><a href="#">puma</a></li></ul>
			  </li>
			</ul>
			</li>

#header li ul li a { color: #grey; background: #fff; padding:5px; }
#header li ul { position:absolute; left:0px; top:65px; display:none; color:#ccc; width:100%; }
#header li ul li a:hover { text-decoration:none; background:red; }
#header li:hover > ul { display:block; }
#header li:.over > ul { display:block; }
#header li ul li ul { position:absolute; left:119px; top:0px; display:none; color:#3e4750; width:100%; }

нот вот в IE работать не хотим.

пробую по рекомендации статьи http://www.webmascon.com/topics/coding/42a.asp

ЯваСкрипт

startList = function() { if (document.all&&document.getElementById) { navRoot = document.getElementById("nav"); for (i=0; i<navRoot.childNodes.length; i++) { node = navRoot.childNodes[i]; if (node.nodeName=="LI") { node.onmouseover=function() { this.className+=" over"; } node.onmouseout=function() { this.className=this.className.replace(" over", ""); } } } } } window.onload=startList;

в моем случае не хочет работать.

+ подозреваю li:hover > ul - EI ну никак не хочет воспринимать.

Edited June 28, 2010 by Vasilk

[Great Rash]

Ну вот к примеру: http://www.alexilin.ru/dynamic-menu-without-javascript/

[npofopr]

http://www.cssplay.co.uk/menus/ здесь тьма менюшек

а для li:hover ставится hover.htc

а тут можете просто посмотреть

[psywalker]

От себя тоже добавлю:

1) Отсюда качни файл http://psywalker.ru/Portfolio/Himik/csshover.htc

2) А вот пример выпадающего меню. http://psywalker.ru/Forum/Menu/6/main.html

[Vasilk]

взял от сюда пример http://css-framework.ru/doc/meniu/horizontal-menu/ пример

и вместо

#header li:hover > ul { display:block; }
#header li:.over > ul { display:block; }

который IE ну ни в какую не хочет видеть

даже если уже прикрепил

body {behavior:url("csshover.htc");}

поставил

#header li:hover ul,
#header li:hover ul li:hover ul,
#header li:hover ul li:hover ul li:hover ul { display: block; }

#header li:hover ul ul,
#header li:hover ul li:hover ul ul { display: none; }

в мозиле работает нормально, выпадает вниз вертикально и под меню и под под меню

в IE таки заработало, но криво

выпадает меню горизонтально

ссылка на рабочий файл та же http://realizant.narod.ru/oborudovanie-dlj...lmonologii.html

[Vasilk]

вопрос соответственно - как сделать чтобы и в IE меню выпадало вертикально вниз???

как и должно быть, а не так как на сей момент горизонтально

[Vasilk]

Уважаемые коллеги!

спасибо за подсказки.

csshover.htc рулит!

просто были в самой разметке уже ошибки + с CSS надо было поколдовать

#header li ul li a {[b] float:none;[/b]

самое главное - работает)))

я уже думал решение в голове таки и не созреет вовсе.....