Перейти к содержанию
СофтФорум - всё о компьютерах и не только

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


Рекомендуемые сообщения

Вот захотел написать скрипт для выпадающего меню. Так чтоб ненадо было у каждого элемента 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>
Изменено пользователем alex45
Ссылка на комментарий
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти
  • Последние посетители   0 пользователей онлайн

    • Ни одного зарегистрированного пользователя не просматривает данную страницу
×
×
  • Создать...