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

2K WebStudio · 09.03.2006, 21:08

Вот код выпадающего меню, которое работает в опере, нэтскейпе и мазиле (в других не смотрел), но майкрософт подкачал

Код HTML:

<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;

Плюс к этому скрипту в стили добавляется это:

Код HTML:

li:hover ul, li.over ul { 
display: block; 
      }

А тэг гд модифицируется таким образом:

Код HTML:

<ul id="nav">

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

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

undeddy · 09.03.2006, 21:18

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

2K WebStudio · 09.03.2006, 21:39

Цитата:

Сообщение от undeddy

Так как компания майкрософт почему-то решила что в 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

Цитата:

Сообщение от Constantine

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

умываю руки, но это такой жуткий монстр...
проще сказать что нельзя без жс обойтись.