Всем Доброго времени суток
Хотела бы попросить вас о помощи небольшой!
А конкретнее: как сверстать трехуровневое выпадающее меню!
Двухуровневое получилось сверстать
по принципу [Только зарегистрированные пользователи могут видеть ссылки. ]
Что б добавить ещё уровень- третий меня не хватает.
в ИЕ не работает...
Кто верстал, помогите!!!
На вебмасконе, там немного уже устарела та статья... Теперь можно без скриптов. Вместо них достаточно подключить [Только зарегистрированные пользователи могут видеть ссылки. ] для IE6...
Примерно так... Только это не вертикальное, а горизонтальное. Переделать его в вертикальное совсем не сложно. Все по аналогии...Код:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Горизонтальное меню (4 уровня)</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> * {margin: 0px; padding: 0px;} body {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 62.5%; color: #000000; background: #FFFFFF;} * html body {behavior: url(csshover.htc);} div#menu {margin: 20px;} ul#mainmenu {font-size: 1.1em; list-style: none;} ul#mainmenu li {text-align: center; background: url(img/bgcenter.gif) no-repeat; float: left; position: relative; cursor: pointer;} ul#mainmenu li#b1 {background: url(img/bgleft.gif);} ul#mainmenu li#b5 {background: url(img/bgright.gif);} ul#mainmenu li a {font-weight: bold; text-decoration: none; line-height: 30px; display: block; width: 100px; height: 30px; overflow: hidden;} * html ul#mainmenu li a {line-height: 28px;} *+html ul#mainmenu li a {line-height: 28px;} ul#mainmenu li ul {font-size: 1em; display: none; width: 150px; border: 1px #CCCCCC solid; position: absolute; left: 0px; top: 30px; list-style: none;} ul#mainmenu li li {text-align: left; background: #333333; width: 150px;} ul#mainmenu li li.arrow {background: url(img/arrow.gif) #333333 no-repeat right center;} ul#mainmenu li li a {font-weight: normal; line-height: normal; width: auto; height: auto; padding: 5px 8px;} * html ul#mainmenu li li a {height: 1%;} ul#mainmenu li li ul {left: 150px; top: 3px;} ul#mainmenu li:hover a {color: #FFFFFF;} ul#mainmenu li li:hover {background-color: #00CC33;} ul#mainmenu li:hover ul ul {display: none;} ul#mainmenu li:hover ul ul ul {display: none;} ul#mainmenu li:hover ul {display: block;} ul#mainmenu li li:hover ul {display: block;} ul#mainmenu li li li:hover ul {display: block;} </style> </head> <body> <div id="menu"> ****<ul id="mainmenu"> ****<li id="b1"><a>Технологии</a> ***** **** ****<li id="b2"><a>Сервис</a> *
- *<li class="arrow">[Только зарегистрированные пользователи могут видеть ссылки. ] *****
* *<li class="arrow">[Только зарегистрированные пользователи могут видеть ссылки. ] *****
- *****
- [Только зарегистрированные пользователи могут видеть ссылки. ] *****
- [Только зарегистрированные пользователи могут видеть ссылки. ] *****<li class="arrow">[Только зарегистрированные пользователи могут видеть ссылки. ] * *
***** *****<li class="arrow">[Только зарегистрированные пользователи могут видеть ссылки. ] * *
- * *
- [Только зарегистрированные пользователи могут видеть ссылки. ] * *
- [Только зарегистрированные пользователи могут видеть ссылки. ] * *
- [Только зарегистрированные пользователи могут видеть ссылки. ] * *
- [Только зарегистрированные пользователи могут видеть ссылки. ] * *
***** *****
- * *
- [Только зарегистрированные пользователи могут видеть ссылки. ] * *
- [Только зарегистрированные пользователи могут видеть ссылки. ] * *
- [Только зарегистрированные пользователи могут видеть ссылки. ] * *
- [Только зарегистрированные пользователи могут видеть ссылки. ] * *
- [Только зарегистрированные пользователи могут видеть ссылки. ] * *
- [Только зарегистрированные пользователи могут видеть ссылки. ] * *
- [Только зарегистрированные пользователи могут видеть ссылки. ] *****
* *
- *****
- [Только зарегистрированные пользователи могут видеть ссылки. ] *****
- [Только зарегистрированные пользователи могут видеть ссылки. ] *****
- [Только зарегистрированные пользователи могут видеть ссылки. ] *****
- [Только зарегистрированные пользователи могут видеть ссылки. ] *****
- [Только зарегистрированные пользователи могут видеть ссылки. ] *****
- [Только зарегистрированные пользователи могут видеть ссылки. ] *
- [Только зарегистрированные пользователи могут видеть ссылки. ] *
**** **** ****<li id="b3"><a>Продукты</a> *
- *
- [Только зарегистрированные пользователи могут видеть ссылки. ] *
- [Только зарегистрированные пользователи могут видеть ссылки. ] *<li class="arrow">[Только зарегистрированные пользователи могут видеть ссылки. ] ***** * *
- [Только зарегистрированные пользователи могут видеть ссылки. ] *
- [Только зарегистрированные пользователи могут видеть ссылки. ] *
**** **** ****<li id="b4"><a>Поддержка</a> *
- *
- [Только зарегистрированные пользователи могут видеть ссылки. ] *
- [Только зарегистрированные пользователи могут видеть ссылки. ] *
- [Только зарегистрированные пользователи могут видеть ссылки. ] *
- [Только зарегистрированные пользователи могут видеть ссылки. ] *
- [Только зарегистрированные пользователи могут видеть ссылки. ] *
- [Только зарегистрированные пользователи могут видеть ссылки. ] *
- [Только зарегистрированные пользователи могут видеть ссылки. ] *
**** **** ****<li id="b5"><a>Контакты</a> *
- *
- [Только зарегистрированные пользователи могут видеть ссылки. ] *
- [Только зарегистрированные пользователи могут видеть ссылки. ] *
- [Только зарегистрированные пользователи могут видеть ссылки. ] *
**** ****[/list] </div> </body> </html>
- *
- [Только зарегистрированные пользователи могут видеть ссылки. ] *
- [Только зарегистрированные пользователи могут видеть ссылки. ] *
- [Только зарегистрированные пользователи могут видеть ссылки. ] *
- [Только зарегистрированные пользователи могут видеть ссылки. ] *
- [Только зарегистрированные пользователи могут видеть ссылки. ] *
извиняюсь за глупость, но
csshover.htc - как его подключить?
Вот так:
Только перед тем, как подключить, его надо для начала скачать...Код:* html body {behavior: url(csshover.htc);}
Спасиба огромное, чтоб я без вас делала)!
htc вот только Расширение не узнаю...
Когда я начинаю делать меню в вертекальном положении, начинает разрушаться целостность.
Я так запуталась...
[B]Что там нужно поменять такое незначительное?[B]
[/quote]
Расположение пунктов самого вернего уровня и абсолютное позиционирование вложенных списков.
Код:<style type="text/css"> * {margin: 0px; padding: 0px;} body {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 62.5%; color: #000000; background: #FFFFFF;} * html body {behavior: url(csshover.htc);} div#menu {margin: 20px;} ul#mainmenu {font-size: 1.1em; width: 100px; list-style: none;} ul#mainmenu li {background: url(img/bgcenter.gif) no-repeat; width: 100px; float: left; position: relative; cursor: pointer;} ul#mainmenu li a {text-indent: 10px; font-weight: bold; text-decoration: none; line-height: 30px; display: block; width: 100px; height: 30px; overflow: hidden;} * html ul#mainmenu li a {line-height: 28px;} *+html ul#mainmenu li a {line-height: 28px;} ul#mainmenu li ul {font-size: 1em; display: none; width: 100px; border: 1px #CCCCCC solid; position: absolute; left: 100px; top: 3px; list-style: none;} ul#mainmenu li li {background: #333333;} ul#mainmenu li li.arrow {background: url(img/arrow.gif) #333333 no-repeat right center;} ul#mainmenu li li a {font-weight: normal; text-indent: 0px; line-height: normal; width: auto; height: auto; padding: 5px 8px;} * html ul#mainmenu li li a {height: 1%;} ul#mainmenu li li ul {left: 100px; top: 3px;} ul#mainmenu li:hover a {color: #FFFFFF;} ul#mainmenu li li:hover {background-color: #00CC33;} ul#mainmenu li:hover ul ul {display: none;} ul#mainmenu li:hover ul ul ul {display: none;} ul#mainmenu li:hover ul {display: block;} ul#mainmenu li li:hover ul {display: block;} ul#mainmenu li li li:hover ul {display: block;} </style>
Ваши права
