Всплывающий список при наводе стрелкой мыши

[Temiks]

Вот такое можно сделать в ИЕ без JS

Пример с ФФ

http://imm.io/2G7T

[eVErl@Sting]

за 100р на мобильник сделаю

[Temiks]

за 100р на мобильник сделаю

спасибо, мне на мобильник не надо, причем код есть, просто его подправить наверное надо

	   <!--[if IE]>
   <style type="text/css">
UL{
	width: 100%; /* Ширина меню */
	list-style: none; /* Для списка убираем маркеры */
	margin: 0; /* Нет отступов вокруг */
	padding: 0; /* Убираем поля вокруг текста */
	font-family: Tahoma; /* Рубленый шрифт для текста меню */
	font-size: 14px; /* Размер названий в пункте меню */
   }
	  LI UL {
	position: absolute; /* Подменю позиционируются абсолютно */
	display: none; /* Скрываем подменю */
	margin-left: 165px; /* Сдвигаем подменю вправо */
	margin-top: -2em; /* Сдвигаем подменю вверх */
   }
	li.class a:hover {
	   list-style: none;
	   font-family: Tahoma; /* Рубленый шрифт для текста меню */
	font-size: 14px;
	background-color: red
   }
   LI A {
	width: 100%;
	display: block; /* Ссылка как блочный элемент */
	padding: 5px; /* Поля вокруг надписи */
	text-decoration: none; /* Подчеркивание у ссылок убираем */
	color: #666; /* Цвет текста */
	border: 1px solid #ccc;	/* Рамка вокруг пунктов меню */
	background-color: #EDEDED; /* Цвет фона */
	border-bottom: 1px solid #ccc; /* Границу снизу не проводим */
   }
   LI A:hover {
	color: white; /* Цвет текста активного пункта */
	background-color: #26303C; /* Цвет фона активного пункта */
	padding: 5px 5px 5px 20px;
	font-family: Tahoma;
	font-size: 18px;
   }
li:hover ul {
	display: block; /* При выделении пункта курсором мыши отображается подменю */
   }

   li:hover ul {
	display: block; /* При выделении пункта курсором мыши отображается подменю */
   }
	</style>
  <![endif]-->

[rus]

что-то вроде того (меню с лева) что ли?

[eVErl@Sting]

без js делать такое меню это полный изврат(

[deadrash]

Вот такое можно сделать в ИЕ без JS

Пример с ФФ

http://imm.io/2G7T

Вот тут наверняка найдёте ваш вариант http://www.cssplay.co.uk/menu/

[eVErl@Sting]

Точнее тут http://www.cssplay.co.uk/menus/

более или менее похожие там на скриптах я только встречал..

[mishka]

без js делать такое меню это полный изврат(

Я скажу что делать его с джс - вот где изврат.

Конечно, если только это подменю не появляется с каким-нибудь эффектом типа фейда/слайда. Но всеравно нужно сделать так чтобы и без джс работало.

Это же элементарнейший дроп.

ul {

position: relative;

}

ul ul {

position: absolute;

top: ...;

left: ...;

display: none;

}

ul li:hover ul {

display: block;

}

PS: куда подевались кнопки редактирования?

Edited December 23, 2010 by mishka2

[Temiks]

без js делать такое меню это полный изврат(

это рабочий код , и он прекрасно работает в ФФ, но не хочет работать в ИЕ, вот и ищу в чем может быть проблема, так как :hover ИЕ 7 и 8 поодерживает без тнга ссылки a:hover

Спасибо за ссылку прочитаю

Спасибо за код, попробую сейчас

Вот урывок кода Html, может поможет

<ul >
					  <li>
						  <a href="#" title="Обо мне" >» Обо мне</a>
						  <ul class="class" >
							  <li class="class" >
								  <a href="#" title="Мой Блог" >» Мой Блог</a>
								  <a href="#" title="Мои интересы" >» Мои интересы</a>
								  <a href="#" title="Мои проэкты" >» Мои проэкты</a>
							  </li>

						  </ul>

					  </li>
					  <li>
						  <a href="#" title="Книги" >» Книги</a>
						  <ul>
							  <li>
								  <a href="#" title="Фентези" >» Фэнтези</a>
								  <a href="#" title="Киберпанк">» Киберпанк</a>
							  </li>
						  </ul>
					  </li>
					  <li>
						  <a href="#" title="Игры" >» Игры</a>
						  <ul>
							  <li>
								  <a href="#" title="Аркада">» Аркада</a>
								  <a href="#" title="Гонки">» Гонки</a>
								  <a href="#" title="Стратегия">» Стратегия</a>
								  <a href="#" title="Экшен">» Экшен</a>
								  <a href="#" title="RPG">» RPG</a>
								  <a href="#" title="Online-only">» Online-only</a>
							  </li>
						  </ul>
					  </li>
					  <li>
						  <a href="#" title="Котакты" >» Контакты</a>
					  </li>

				  </ul>

Edited December 23, 2010 by Temiks

[Нет]

Temiks, в IE6 это можно сделать с помощью expression. При этом во всех остальных браузерах JavaScript не нужен, достаточно псевдокласса hover. Подробнее, например, здесь.

[Temiks]

ul {

position: relative;

}

ul ul {

position: absolute;

top: ...;

left: ...;

display: none;

}

ul li:hover ul {

display: block;

}

код ваш работает в ФФ, но у меня в ИЕ 8 нет, вот в чем проблема

Temiks, в IE6 это можно сделать с помощью expression. При этом во всех остальных браузерах JavaScript не нужен, достаточно псевдокласса hover. Подробнее, например, здесь.

так а я об чем, что пишу просто :hover а оно не хочет отображать

главное что отображает это подменю так это вот этот код

li:hover ul {

display: block; /* При выделении пункта курсором мыши отображается подменю */

}

Edited December 23, 2010 by Temiks

[rus]

Temiks чем тебе не угодил мой вариант? или слабо при ховере добавить правило для подменю?

[mishka]

чтото у тебя с ие8 траблы, так как все ие выше 6й версии ие7, 8, 9 ... поддерживают :hover на все элементы, не только на линку.

Дай архивчег, посмотрю.

[Temiks]

Temiks чем тебе не угодил мой вариант? или слабо при ховере добавить правило для подменю?

ок, посмотрю обязательно

[Temiks]

Ошибка была в доктайпе, изменил с

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

на

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> все ок.

прижимал его с margin-bottom:0px;

в чем суть ошибки?