Вертикальное выпадающее меню

zetaap · June 4, 2008

Помогите разобраться , менюшка не работает в IE воще ни как, в Опере и ФФ вс? отлично. Помогите найти и исправить ошибку.

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

Html:

<div id="menu" class="col1_bl_cont">
	<ul id="nav">
	<li><a href="#">Новости</a></li>
	<li><a href="#">Статьи</a></li>
	<li><a href="#">Спонсоры</a>
	<ul>
	<li><a href="#">Платит</a></li>
	<li><a href="#">На проверке</a></li>
	<li><a href="#">Не платит</a></li>
	</ul>
	</li>
	<li><a href="#">Категория 2</a></li>
	<li><a href="#">Категория 3</a></li>
	<li><a href="#">Категория 4</a>  </li>
	</ul>
	</div>

CSS:

/* === menu === */

#menu
{
	vertical-align:middle!important;
	font:12px Tahoma, Verdana;
	cursor:hand;
}
#menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 175px;
}
#menu li
{
	cursor: hand;
	height: 18px;
	padding: 4px;
	position: relative;
	background: url(../images/mb.gif) bottom repeat-x;
	list-style-type: none;
}
#menu li div
{
	cursor:hand;
}
#menu li a
{
	display: block;
	background: #fff;
	text-decoration:none;
}
#menu li a:hover
{
	text-decoration: underline;
}
#menu li ul { 
	position: absolute;
	left: 175px;
	background: #fff;
	border: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	top: 0;
	display: none;
}
/* Fix IE. Hide from IE Mac */ * html #menu ul li { float: left; height: 1%; } * html #menu ul li a { height: 1%; } /* End */
#menu li a:hover { background: #f9f9f9; }
#menu li:hover ul, li.over ul { display: block; }

JS

// JavaScript Document

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;

Заранее всех благадарю за помошь.

Sotnikov · June 5, 2008

ну ведь здесь же работает, а код клон http://www.alistapart.com/d/horizdropdowns/horizontal2.htm

zetaap · June 5, 2008

Ну вот у меня то меню в ИЕ тоже работает а моя версия не работает =( , я вот и прошу проверить кого нить кто в этом профессионально разбирается. Может где то что то поменять нужно?

Svet · November 13, 2008

Доброго времени суток! Помогите пожалуйста разобраться. Делаю выпадающее меню средствами CSS, работает оно прекрасно, но.... есть проблема с позиционированием. Почему-то глючит мозилка - картинка с менюшкой почему-то приклеивается к самому верху страницы и выставление отступов top и left в CSS не действуют, хотя в IE все ок. Если выставить position:absolute начинает глючить сама менюшка в IE, хотя тада все гут. Помогите пожалуйста.

Код HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<LINK REL="stylesheet" TYPE="text/css" HREF="MenuTest.css"></head>

<body bgcolor="#000000">
   <div id="menu">
   <img src="images/kolobok.gif">
    <p><ul> 
        <li><a href="#">К ПРАЗДНИКУ</a>

        <!--[if lte IE 6]>
        <a href="">К ПРАЗДНИКУ
        <table><tr><td>
        <![endif]-->

            <ul>
                <li><a href="#" title="">ДЕНЬ ЗНАНИЙ</a></li>
                <li><a href="#" title="">8 МАРТА</a></li>
                <li><a href="#" title="">ДЕНЬ РОЖДЕНИЯ</a></li>
				<li><a href="#" title="">РОЖДЕСТВО</a></li>
				<li><a href="#" title="">НОВЫЙ ГОД</a></li>
				<li><a href="#" title="">ХЭЛОУИН</a></li>
				<li><a href="#" title="">ДЕНЬ СВЯТОГО ВАЛЕНТИНА</a></li>
            </ul>

        <!--[if lte IE 6]>
        </td></tr></table>
        </a>
        <![endif]-->

      </li>
</ul> </p>
</div>

</body>
</html>

И CSS:

@charset "UTF-8";
/* CSS Document */
#menu{
    font-family:Tahoma;
    width:150px;
    height:400px;
    position:relative;
	top:40%;
	left:70%;
}
ul{
    padding:0;
    margin:0;
    list-style:none
}
li{
    float:left;
    position:relative;
	text-align:left
}
ul li a{
    display:block;
    text-decoration:none;
    width:200px;
    height:20px;
    text-align:left;
    color:#879cb4;
    line-height:15px;
    font-size:12px;
	font-weight:bold;
}
ul li ul{
    display:none
}
ul li:hover a{
    color:#ffffff;
	text-decoration:underline;
}
li:hover ul{
    display:block;
    position:absolute;
    top:20px;
    left:40px;
    width:105px
}
li:hover ul li a{
    display:block;
    color:#879cb4;
	text-decoration:none;
	font-weight:bold
}
li:hover li a:hover{
    color:#ffffff;
	text-decoration:underline;
}