Новости
Видео
Microsoft
Windows 10
Железо
Программы
Форум

Имя пользователя:
Пароль:  
Помощь | Регистрация | Забыли пароль?  | Правила  

Компьютерный форум OSzone.net » Компьютеры + Интернет » Вебмастеру » [решено] Выпадающее меню в CSS. Прблеммы в IE

Ответить
Настройки темы
[решено] Выпадающее меню в CSS. Прблеммы в IE

Аватара для Artem-Samsung

Ветеран


Сообщения: 823
Благодарности: 53

Профиль | Сайт | Отправить PM | Цитировать

Добрый день.
По примеру урока http://www.webmascon.com/topics/coding/42a.asp
создал аналогичную менюшку, но работает она в IE с глюком.
Когда навожу на меню1, то выпадает меню, но когда пытаюсь навести на подменю,
то оно исчезает. В Опере все ок.
Помгите пожалуйста.

Вот пример выпадающего меню:

Код: Выделить весь код
<body> 
<ul id="nav"> 
  <li><a href="#">About</a> 
    <ul> 
      <li><a href="#">History</a></li> 
      <li><a href="#">Team</a></li> 
      <li><a href="#">Offices</a></li> 
    </ul> 
  </li> 
</ul> 
</body>
</html>
Стиль, что бы меню выпадало вправо:
(В Internet Explorer)
Изменил только вот это
li ul {
position: absolute;
left:0;
top: 23;
display: none;
}

Код: Выделить весь код
<style type="text/css">
body {
	font: normal 11px verdana;
	}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 150px; /* Width of Menu Items */
	border-bottom: 1px solid #ccc;
	}
	
ul li {
	position: relative;
	}
	
li ul {
	position: absolute;
	left:0;
	top: 23;
	display: none;
	}

/* Styles for Menu Items */
ul li a {
	display: block;
	text-decoration: none;
	color: #777;
	background: #fff; /* IE6 Bug */
	padding: 5px;
	border: 1px solid #ccc; /* IE6 Bug */
	border-bottom: 0;
	}
	
/* Holly Hack. IE Requirement \*/
* html ul li { float: none; height: 1%; }
* html ul li a { height: 1%; }
/* End */

li:hover ul, li.over ul { display: block; } /* The magic */
</style>
А вот вправо, здесь все ок. С этого я собственно и модифицировал:
Код: Выделить весь код
<style type="text/css">
body {
	font: normal 11px verdana;
	}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 150px; /* Width of Menu Items */
	border-bottom: 1px solid #ccc;
	}
	
ul li {
	position: relative;
	}
	
li ul {
	position: absolute;
	left: 149px; /* Set 1px less than menu width */
	top: 0;
	display: none;
	}

/* Styles for Menu Items */
ul li a {
	display: block;
	text-decoration: none;
	color: #777;
	background: #fff; /* IE6 Bug */
	padding: 5px;
	border: 1px solid #ccc; /* IE6 Bug */
	border-bottom: 0;
	}
	
/* Holly Hack. IE Requirement \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

li:hover ul, li.over ul { display: block; } /* The magic */
</style>
еще встроенный скрипт:

Код: Выделить весь код
// 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;

-------
Мой блог Web Development

Отправлено: 22:35, 16-04-2008

 

Старожил


Сообщения: 313
Благодарности: 46

Профиль | Отправить PM | Цитировать

все пашет, проверил в ff, ie 6-7 никаких глюков
Это сообщение посчитали полезным следующие участники:

Отправлено: 00:58, 17-04-2008 | #2



Для отключения данного рекламного блока вам необходимо зарегистрироваться или войти с учетной записью социальной сети.

Если же вы забыли свой пароль на форуме, то воспользуйтесь данной ссылкой для восстановления пароля.


Аватара для Artem-Samsung

Ветеран


Сообщения: 823
Благодарности: 53

Профиль | Сайт | Отправить PM | Цитировать

Капец О.о
Я вот тоже проверил на своем ноутбук, все ок. Но на компьютере глюк, на ноуте друга, где это все делалось - аналогично глюк О.о ((
До чего же мне нравится верстка)) Оотображается по разному не только в разных браузерах но и по разному в разных версиях этих браузерах) А в этом случае еще расскрыл, что еще и разных компьютеров ))

-------
Мой блог Web Development

Отправлено: 01:52, 17-04-2008 | #3


Deadooshka


Сообщения: 2486
Благодарности: 672

Профиль | Отправить PM | Цитировать

Цитата Artem-Samsung:
li:hover »
а в IE такое только с тегом a стабильно вроде...

Отправлено: 04:43, 17-04-2008 | #4



Компьютерный форум OSzone.net » Компьютеры + Интернет » Вебмастеру » [решено] Выпадающее меню в CSS. Прблеммы в IE

Участник сейчас на форуме Участник сейчас на форуме Участник вне форума Участник вне форума Автор темы Автор темы Шапка темы Сообщение прикреплено

Похожие темы
Название темы Автор Информация о форуме Ответов Последнее сообщение
Интерфейс - Windows 7 выпадающее меню? karatv Microsoft Windows 7 0 01-11-2009 12:55
Вертикальное выпадающее меню Olga_Erm Вебмастеру 3 21-02-2008 18:47
[решено] Выпадающее меню (проблема в Opera) Strange_V Вебмастеру 3 14-02-2008 15:42
CSS Guest Вебмастеру 1 14-04-2004 03:45
Выпадающее меню Surround Вебмастеру 3 19-01-2004 19:52


« Предыдущая тема | Следующая тема »


 
Переход