Всплывающее меню

chest · July 25, 2012

Есть вот такое меню


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<meta http-equiv="content-language" content="uk">
        <link href="css/menu1.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/JavaScript">
<!--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;
//-->
</script>
</head>
<div class="main">
<!--[if lte IE 6]>
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
<![endif]-->
	<ul id="nav">
		<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="#">аываывавыа</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="#">авыававыа</a></li>
	</ul>
  </div>
<body>
</body>
</html>

css:


#nav,#nav ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
#nav {
	font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
	font-size: 12px;
    height: 60px;
    list-style: none outside none;
    margin: 65px auto;
    width: 593px;

    /* gradient */
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #83c103), color-stop(0.5, #78ae00), color-stop(0.51, #7db902), color-stop(1, #88ca04));
    background-image: -moz-linear-gradient(center bottom, #83c103 0%, #78ae00 50%, #7db902 51%, #88ca04 100%);
    background-color: #7db902;
}
#nav li {
    border-bottom: 1px solid #78ae00;
    border-left: 1px solid #b7de0c;
    border-right: 1px solid #479e00;
    border-top: 1px solid #88ca04;
    display: block;
    float: left;
    height: 40px;
    position: relative;
    width: 96px;
}
#nav > li:first-child {
    border-left: 0 none;
    margin-left: 5px;
}
#nav ul {
    left: -9999px;
    position: absolute;
    top: -9999px;
    z-index: 2;
}
#nav ul li {
    background: none repeat scroll 0 0 #88ca04;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
   height: 50%;
    width: 100%;

}
#nav li a {
    color: #FFFFFF;
    display: block;
    line-height: 58px;
    outline: medium none;
    text-align: center;
    text-decoration: none;

    /* gradient */
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #83c103), color-stop(0.5, #78ae00), color-stop(0.51, #7db902), color-stop(1, #88ca04));
    background-image: -moz-linear-gradient(center bottom, #83c103 0%, #78ae00 50%, #7db902 51%, #88ca04 100%);
    background-color: #7db902;
}
 #nav li a:hover {
    color: #000000;
    display: block;
    line-height: 58px;
    outline: medium none;
    text-align: center;
    text-decoration: none;


    /* gradient */
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #83c103), color-stop(0.5, #78ae00), color-stop(0.51, #7db902), color-stop(1, #88ca04));
    background-image: -moz-linear-gradient(center bottom, #83c103 0%, #78ae00 50%, #7db902 51%, #88ca04 100%);
    background-color: #7db902;
}

#nav li:hover ul {
    left: 0;
    top: 58px;
    width: 144px;
	display:block;
}
li:hover ul, li.over ul { 
	display: block; 
      }

Почему оно в Internet explorere не работает и как это починить? и еще, кнопки смещаются в Internet explorere, как их растянуть?

а, еще в Опере и Internet explorere градиент не работает(

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

Edited July 25, 2012 by chest

Sign In

Всплывающее меню

Question

chest

Link to comment

Share on other sites

0 answers to this question

Recommended Posts

Join the conversation

Обсуждения

Forums

Important Information