Выпадающее меню на CSS - нужна помощь

Можно ли сделать выпадающее меню (при наведении мышкой) на CSS, чтоб работало во всех браузерах, но без ипользования javascript и каких-либо дополнительных файлов?

я делаю по такому способу

HTML:

Код:

<ul> <li><a href="">Меню 1</a> <ul> <li><a href="">Подменю 1</a></li> <li><a href="">Подменю 2</a></li> <li><a href="">Подменю 3</a></li> </ul> </li> <ul>

CSS:

Код:

ul li ul {display: none} ul li:hover ul, ul li ul:hover {display: block}

но это не работает в IE, если не применить хак - в CSS указываю ссылку на файл csshover.htc (с нета скачал), тогда в ИЕ работает.
Хотелось бы обойтись без хаков.

И можно ли сделать чтобы выпадающее меню появлялось не при наведении, а при клике на пункт меню?

Последний раз редактировалось: Petek (12/11/08 в 22:15), всего редактировалось 1 раз

HTML:

Код:

<div id="list_content">    <ul id="lists">                   <li><a href="#" class="tl">Title<!--[if IE 7]><!--></a><!--<![endif]-->                      <!--[if lte IE 6]><table><tr><td><![endif]-->                   <div class="pos1">                      <dl>                         <dd><a href="#">Link</a></dd>                         <dd><a href="#">Link</a></dd>                      </dl>                      <dl>                         <dd><a href="#">Link</a></dd>                         <dd><a href="#">Link</a></dd>                      </dl>                   </div>                   <!--[if lte IE 6]></td></tr></table></a><![endif]-->                   </li>                   <li><a href="#" class="tl">Title2<!--[if IE 7]><!--></a><!--<![endif]-->                      <!--[if lte IE 6]><table><tr><td><![endif]-->                   <div class="pos1">                      <dl>                         <dd><a href="#">Link2</a></dd>                         <dd><a href="#">Link2</a></dd>                      </dl>                      <dl>                         <dd><a href="#">Link2</a></dd>                         <dd><a href="#">Link2</a></dd>                      </dl>                   </div>                   <!--[if lte IE 6]></td></tr></table></a><![endif]-->                   </li>                                  </ul> </div>

CSS:

Код:

#list_content { position: relative; float: left; } #lists {float: left; height: 50px;} #lists li { width: 100px; float:left; list-style: none; padding-bottom: 30px; } #lists li a.tl {width: 100px; text-transform: uppercase; height:45px; padding-bottom: 20px; } #lists div {display:none;  } .pos1 { z-index: 500; } #lists li a:hover { white-space:normal; background-position:130px 15px;} #lists li:hover > a { white-space:normal; background-position:130px 15px;} #lists :hover div { display:block; width:240px; position:absolute; left:0; top:34px; border:1px solid #013034; } #lists :hover div dl {display:inline; float:left; width:110px;} #lists :hover div dl dd { margin-left: 5px; } #lists :hover div dd a {display:block; text-decoration:none;  text-align: left; font-size: 1em; text-transform: none;} #lists :hover div dd a:hover {text-decoration: underline;}

Конечно полностью без хаков обойтись тяжело
Вот тебе еще пара ссылок на похожую реализацию:
вертикальное меню и горизонтальное.

И чтоб меню при клике выпадало - без js не обойдешься никак.

Domior, сэнкс, будем разбираться, но код большой конечно, ещё и таблицы, смотрю, там какие-то )

гуру css, помогайте!

короче, делаю выпадающее меню по своему варианту, решил сделать ссылки с display:block, в ИЕ проверяю, там 2 ошибки:

1. "Меню 2" и "Меню 3" - при наведении мышки бэкграунд меняется, но только, если наводить мышку на уровне текста и выше, ниже текста - нифига, хотя ссылка блоковая и в нормальных браузерах работает.

2. Выпадающее меню работает, но если навести мышку ниже "Подменю 1" исчезает.

Я уже заколебался варианты искать,
вот он пациент

porndiz.com/test/

Видимо очередные глюки ИЕ с float'ом
Если размер верхних менюшек предполагается быть одинаковым, то задай фиксированную ширину в "div#topmenu a".

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

http://www.cssplay.co.uk/menus/final_drop.html


зы - а ёпт, это наверное и есть код Домиор. Ну ладно, погляди как оно в оригинале.

Dizman© писал:

http://www.cssplay.co.uk/menus/final_drop.html зы - а ёпт, это наверное и есть код Домиор. Ну ладно, погляди как оно в оригинале.

ага, там тоже с таблицами, не хочу усложнять )

короче, я указал фиксированную ширину для a в подменю, а главное может менять размеры,
проблема с наведением мышки ниже текста в Меню 2 и 3 правда не решилась, но подменю теперь не исчезает

Petek писал:

проблема с наведением мышки ниже текста в Меню 2 и 3 правда не решилась, но подменю теперь не исчезает

Хм... странно, что не решилась. Только что проверил у себя - нормально меню подсвечается в ИЕ6.

Mika писал:

Хм... странно, что не решилась. Только что проверил у себя - нормально меню подсвечается в ИЕ6.

хз, я тоже в ИЕ6 смотрел.

щас у меня тоже работает, но после того как я добавил для ИЕ правила

Код:

* html #topmenu a {    float: left;    } * html div#topmenu ul li ul {    clear: both    }

я сделал для бэкграунда ссылки 2 картинки, чтоб они раздвигались при увеличении текста в ссылке меню, для этого внутрь ссылки поместил тег <b> (для привязки второго бэкграунда) и сделал его блоком, но ИЕ не видел тег <b> вообще, поэтому добавил верхние правила, после этого ИЕ увидел <b> и заодно проблема решилась, хотя может она раньше (в процессе переборки различных вариантов) решилась, я не проверял