Проблема с CSS выпадающим меню в IE:( [Архив]

2K WebStudio

09.03.2006, 21:08

Вот код выпадающего меню, которое работает в опере, нэтскейпе и мазиле (в других не смотрел), но майкрософт подкачал:(
<html>
<style type="text/css">
<style>
/*Ubiraem markeri*/
ul {
margin: 0;
padding: 0;
width: 40;
list-style: none;
height: 24px;
border: none;
}
ul li {
position: relative;
}
/*Podmenu sprava*/
li ul {
position: absolute;
top:0;
left: 39;
display: none;
}
/*Stili ssilok*/
ul li a {
display: block;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */
li:hover ul { display: block; }
</style>
</style>
<body>
<ul>
<li><a href="#">One</a></li>
<li><a href="#">Two</a>
<ul>
<li><a href="#">Two_one</a></li>
<li><a href="#">Two_two</a></li>
<li><a href="#">Two_three</a></li>
</ul>
</li>
</ul>
</body>
</html>
Вот в IE подменюшки не выскактвают:(
Есть решение при участии JS:
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, li.over ul {
display: block;
}
А тэг гд модифицируется таким образом:<ul id="nav">

Теперь сам вопрос.. как заставить это меню выпадать в IE без JS? Просто такая ситуация, что я могу использовать только CSS:(

Заранее спасибо!

undeddy

09.03.2006, 21:18

Так как компания майкрософт почему-то решила что в IE псевдокласс hover будет определен только для гиперссылок (тегов <A>), то для IE решение этой задачи без JS невозможно.
НО! Я тоже так думал, пока вчера не увидел пример, где была решена твоя проблема. Вот только адрес забыл. Но там упор был сделан именно на таблицы.

2K WebStudio

09.03.2006, 21:39

Так как компания майкрософт почему-то решила что в IE псевдокласс hover будет определен только для гиперссылок (тегов <A>), то для IE решение этой задачи без JS невозможно.
НО! Я тоже так думал, пока вчера не увидел пример, где была решена твоя проблема. Вот только адрес забыл. Но там упор был сделан именно на таблицы.

Это 'но' крайне радует!:)
Буду очень благодарен, если найдёшь!

KidsKilla

09.03.2006, 23:15

это НО фигня по определению потому что:
а) нам нужен не сам элемент А, другой элемент, а в ие псевдо-класс ховер мало того что только для ссылок, так ещё и ссылка самая последняя в правиле должна быть.
б) есть вариант наподебие a:hover{smt:expression(this.className+=" over";this.onmouseout=function(){this.className=this.className.replace(" over","");})} но это нифига не вариант, бо тотде жаваскрипт.
в) говори начальству или хзктоичто, что если у юзера нет жс, можно сделать, чтобы подменю отображалось прям под текущим пунктом типа подсписка но это максимум.

Constantine

09.03.2006, 23:15

http://www.cssplay.co.uk/menus/dd_valid.html

KidsKilla

09.03.2006, 23:28

http://www.cssplay.co.uk/menus/dd_valid.html
умываю руки, но это такой жуткий монстр...
проще сказать что нельзя без жс обойтись.