Fliand
Well-Known Member
- Регистрация
- 16.09.2007
- Сообщения
- 81
Вот захотел написать скрипт для выпадающего меню. Так чтоб ненадо было у каждого элемента LI прописывать событие onmouseover и onmouseout.
Работает, но неверно.
Когда я навожу на первую сылку, должна появиться первое саб меню, но появляется последнее, навожу на 2 ссылку, тоже появляется последнее саб меню и т.д. Непонимаю в чем проблема. Плиз помогите кто знает.
Работает, но неверно.
Когда я навожу на первую сылку, должна появиться первое саб меню, но появляется последнее, навожу на 2 ссылку, тоже появляется последнее саб меню и т.д. Непонимаю в чем проблема. Плиз помогите кто знает.
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Vertical Drop Down Menus</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!--<script type="text/javascript" src="scripts/drop_dow.js"></script>-->
<script type="text/javascript">
<!--
startList = function() {
var id_menu = document.getElementById("navbar");
for(var i = 0; i < id_menu.childNodes.length; i++) {
var node = id_menu.childNodes[i];
if(node.nodeName == "LI") {
if(node.hasChildNodes()) {
for(var a = 0; a < node.childNodes.length; a++) {
var node_li = node.childNodes[a];
if(node_li.nodeName == "UL") {
node.onmouseover = function() {
node_li.style.display = "block";
}
node.onmouseout = function() {
node_li.style.display = "none";
}
}
}
}
}
}
}
window.onload = startList;
//-->
</script>
<style type="text/css">
#navbar {
margin: 0px;
padding: 0px;
list-style-type: none;
width: 150px;
border-bottom: 1px solid #333333;
}
#navbar li {
position: relative;
border: 1px solid #333333;
border-bottom: 0px;
}
#navbar a {
color: #000000;
display: block;
font: 12px Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
padding: 5px;
}
#navbar a:hover {
color: #E2144A;
background: #f9f9f9;
}
/* styles for sub_navbar */
#navbar ul {
border-bottom: 1px solid #333333;
position: absolute;
top: -1px;
left: 148px;
display: none;
width: 150px;
margin: 0px;
padding: 0px;
list-style-type: none;
}
/* end */
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
</style>
</head>
<body>
<ul id="navbar">
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Team</a>
<ul>
<li><a href="#">Link-01</a></li>
<li><a href="#">Link-02</a></li>
</ul>
</li>
<li><a href="#">Offices</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Internet Marketing</a></li>
<li><a href="#">Hosting</a></li>
<li><a href="#">Domain Names</a></li>
<li><a href="#">Broadband</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a>
<ul>
<li><a href="#">United Kingdom</a></li>
<li><a href="#">France</a></li>
<li><a href="#">USA</a></li>
<li><a href="#">Australia</a></li>
</ul>
</li>
</ul>
</body>
</html>
