Jump to content
СофтФорум - всё о компьютерах и не только

Проблема со скриптом

Recommended Posts

Вот захотел написать скрипт для выпадающего меню. Так чтоб ненадо было у каждого элемента LI прописывать событие onmouseover и onmouseout.

Работает, но неверно. :no:

Когда я навожу на первую сылку, должна появиться первое саб меню, но появляется последнее, навожу на 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>
Edited by alex45
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...