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

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

Это в IE А это в FF

Sign In

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

Question

zetaap

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

Sotnikov

Link to comment

Share on other sites

zetaap

Link to comment

Share on other sites

Svet

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information