меню на html+css

B
На сайте с 03.08.2007
Offline
82
1349

У меня проблема с выпадающим CSS-меню.

Нашел в интернете вот такое меню:

CSS


#nav ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px; /* Width of Menu Items */
border-bottom: 2px solid #A72C2E;
border-right: 2px solid #A72C2E;

}

#nav ul li {
position: relative;
}

#nav li ul {
position: absolute;
left: 149px; /* Set 1px less than menu width */
top: 0;
display: none;
}

/* Styles for Menu Items */
#nav ul li a {
display: block;
text-decoration: none;
color: #C7C6C6;
background: #282A2C; /* IE6 Bug */
padding: 2px;
border: 1px solid #ccc;
border-bottom: 0;
}

/* Fix IE. Hide from IE Mac \*/
* html #nav ul li { float: left; height: 1%; }
* html #nav ul li a { height: 1%; }
/* End */

#nav ul li a:hover { color: #FFFFFF; background: #A72C2E; } /* Hover Styles */

#nav li ul li a { padding: 2px 5px; } /* Sub Menu Styles */

#nav li:hover ul, li.over ul { display: block; } /* The magic */

JS

startList = function() { 

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

Затем структура меню:

<script type="text/javascript" src="/menu/drop_down.js"></script> 

<div id="nav" align="center">
<ul id="nav">
<li><a href="/"><strong>ГЛАВНАЯ СТРАНИЦА</strong></a></li>
<li><a href="/forum/"><strong>НАШ ФОРУМ</strong></a></li>
<li><a href="/downloads/"><strong>ФАЙЛОВЫЙ АРХИВ</strong></a>
<ul>
<li><a href="/downloads/"><strong>ПОСЛЕДНИЕ ФАЙЛЫ</strong></a></li>
<li><a href="/downloads/cat57.html"><strong>FIFA 2009</strong></a></li>
<li><a href="/downloads/cat44.html"><strong>FIFA 2008</strong></a></li>
<li><a href="/downloads/cat30.html"><strong>FIFA 2007</strong></a></li>
<li><a href="/downloads/cat55.html"><strong>UEFA EURO 2008</strong></a></li>
<li><a href="/downloads/cat40.html"><strong>UEFA CL 06/07</strong></a></li>
<li><a href="/downloads/cat24.html"><strong>ФУТБОЛЬНАЯ МУЗЫКА</strong></a></li>
<li><a href="/downloads/cat22.html"><strong>ФУТБОЛЬНОЕ ВИДЕО</strong></a></li>
</ul></li>
<li><a href="/sections/"><strong>СТАТЬИ</strong></a>
<ul>
<li><a href="/sections/top16.html"><strong>FIFA 2009</strong></a></li>
<li><a href="/sections/top14.html"><strong>FIFA 2008</strong></a></li>
<li><a href="/sections/top11.html"><strong>FIFA 2007</strong></a></li>
<li><a href="/sections/top15.html"><strong>UEFA EURO 2008</strong></a></li>
<li><a href="/sections/top13.html"><strong>UEFA CL 06/07</strong></a></li>
<li><a href="/sections/top6.html"><strong>FIFA World Cup 2006</strong></a></li>
</ul></li>
<li><a href="/"><strong>ИНФOРМАЦИЯ О FIFA</strong></a>
<ul>
<li><a href="/controls.php"><strong>УПРАВЛЕНИЕ В FIFA</strong></a></li>
<li><a href="/tactics.php"><strong>ТАКТИКА НАП/ЗАЩ</strong></a></li>
<li><a href="/sxemy.php"><strong>ИГРОВЫЕ СХЕМЫ</strong></a></li>
<li><a href="/positions.php"><strong>ПОЗИЦИИ ИГРОКОВ</strong></a></li>
</ul></li>
<li><a href="/fifa09guide/"><strong>МАНУАЛ ПО FIFA 09</strong></a></li>
<li><a href="/tutorials.php"><strong>ТУТОРИАЛЫ ПО FIFA</strong></a></li>
<li><a href="/music.php"><strong>МУЗЫКА ИЗ FIFA</strong></a></li>
<li><a href="/wcg.php"><strong>FIFA НА WCG</strong></a></li>
<li><a href="/gallery/"><strong>ГАЛЕРЕЯ</strong></a></li>
<li><a href="/"><strong>ВИДЕОРАЗДЕЛЫ</strong></a>
<ul>
<li><a href="/video_npcl/"><strong>НПКЛ</strong></a></li>
<li><a href="/video_1gtv/"><strong>ВИРТУАЛЬНЫЙ ФУТБОЛ</strong></a></li>
</ul></li>
<li><a href="/forum/index.php?showforum=5"><strong>НАШИ ТУРНИРЫ</strong></a></li>
<li><a href="http://league.fifarus.ru/"><strong>ФИФАЛИГА</strong></a></li>
<li><a href="/about_ea.php"><strong>О КОМПАНИИ EA</strong></a></li>
<li><a href="/about.php"><strong>О НАШЕМ САЙТЕ</strong></a></li>
<li><a href="/links.php"><strong>ССЫЛКИ</strong></a></li>
</ul> </div><br />

Ошибка: в IE при выпадении подпункта меню не устанавливается курсор. Когда его наводишь на подменю, то оно исчезает.

В Опере все нормально.

Вы спросите, зачем у меня

<div id="nav" align="center"> 

<ul id="nav">

Фишка в том, что мне надо было меню процентровать. Добавил <div align="center">. Но меню не хотело работать с <ul id="nav">. В другом примере увидел, что кто-то в div засунул id="nav", вставил - и все заработало. Если убрать id="nav" из ul то меню все равно будет работать.

Помогите с ИЕ все таки, буду очень признателен.

a.fatman
На сайте с 15.01.2006
Offline
127
#1

А вы знаете, что не должно быть двух элементов с одинаковым id на странице?

И в коде:

 node.onmouseout=function() { 

this.className=this.className.replace »
(" over", "");
}

Вот это: "»" надо убрать. Оно означает разрыв длинной строки в примере. И (" over", ""); перенсти на предыдущую строку.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий