Luminar

Все работает в лучшем виде! =) Я тоже подумал сразу на топ, но когда я ставил top:32 ничего не менялось =) а вы мне показали еще и "px" ! Век живи, век учись - а на мелочах все равно споткнешься... )) Спасибо огромное!

Да он на одном уровне выводит - вглубь первой менюшки. Спасибо за коррекцию и облегчение кода!!!

а не все в порядке. забыл тег закрыть. Но все равно соскальзывает меню.

сек, сейчас попробую.

Я пробовал в IE7 - там выпадающие менюшки почему-то сползают в правую колонку... А IE<6 даже хувер не тянет... хотя без него можно и обойтись. А как тогда присвоить правила заданные в стилях?

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

Эх, наверное это слишком простой вопрос чтобы его обсуждать...

И еще там проблема в правом блоке меню - под строенной таблицей "Популярные темы" возникает промежуток, который никак не убрать. Заранее всем спасибо!

Всем привет! Подскажите, пожалуйста, отчего в Интернет Эксплорере верхнее выпадающее меню (на CSS) отображается не корректно? Все время съезжает на соседнюю справа ячейку. (В опере и FF все ок). http://perfect-human.ru/cms/ Код CSS: <style type="text/css"> #nav, #nav ul { list-style: none; margin: 0; padding: 0;} #nav li {float: left; position: relative; background: #515151; back\ground: none;} #nav a{ color: #000; text-decoration: none; display: block; width: 126px; height: 24px; padding-top: 8px; text-align: center; font:14px "Times New Roman", Times, serif; background: url(../img/dark.gif);} #nav a:hover {color: #fff; background: url(../img/light.gif);} #nav li ul { display: none; position: absolute; background: url(../img/menu.gif); text-align: center; font:14px "Times New Roman", Times, serif; width: 126px;} #nav li li a { width: 126px; background: none;} #nav li:hover ul, #nav li.jshover ul { display: block;} </style> Код ниже вставлен в ячейку таблицы: <table width="1263" style="background:url(../img/fon.jpg)"> <tr> <td width="126"> <UL id=nav><LI><A href="#null">Торжество Духа</A><UL> <LI><A href="#null">Суперсознание</A> </LI> <LI><A href="#null">Дух-Душа-Сознание</A></LI> <LI style="height:32px"><img src="../img/dark.gif" width="126" height="32" /></LI> </UL></LI></UL> </td> <td width="126"> <UL id=nav><LI><A href="#null">Искусство Магии</A><UL> <LI><A href="#null">Тольтекская магия</A> </LI> <LI><A href="#null">Психическая магия</A></LI> <LI><A href="#null">Белая магия</A></LI> <LI><A href="#null">Черная магия</A></LI> <LI><A href="#null">Магия Прорицания</A></LI> <LI><A href="#null">Природная магия</A></LI> <LI><A href="#null">Магия Кундалини</A></LI> <LI style="height:32px"><img src="../img/dark.gif" width="126" height="32" /></LI> </UL></LI></UL> </td> <td width="126"> <UL id=nav><LI><A href="#null">Контроль Энергии</A> <UL> <LI><A href="#null">Тонкие тела</A> </LI> <LI><A href="#null">Экстрасенсорика</A> </LI> <LI><A href="#null">Набор Энергии</A></LI> <LI><A href="#null">Дыхание</A></LI> <LI><A href="#null">Йога</A></LI> <LI style="height:32px"><img src="../img/dark.gif" width="126" height="32" /></LI> </UL></LI></UL> </td> <td width="126"> <UL id=nav><LI><A href="#null">Ключ Подсознания</A> <UL><LI><A href="#null">Интуиция</A> </LI> <LI><A href="#null">Аутотренинг</A></LI> <LI><A href="#null">Творчество</A></LI> <LI><A href="#null">Программы</A></LI> <LI style="height:32px"><img src="../img/dark.gif" width="126" height="32" /></LI> </UL></LI></UL> </td> <td width="126"> <UL id=nav><LI><A href="#null">Мир Сновидений</A><UL> <LI><A href="#null">Методики</A></LI> <LI><A href="#null">Опыт</A></LI> <LI><A href="#null">Дневники</A> </LI> <LI><A href="#null">Карты снов</A> </LI> <LI style="height:32px"><img src="../img/dark.gif" width="126" height="32" /></LI> </UL></LI></UL> </td> <td width="126"> <UL id=nav><LI><A href="#null">Широта Сознания</A><UL> <LI><A href="#null">Память</A> </LI> <LI><A href="#null">Восприятие</A> </LI> <LI><A href="#null">Воля</A></LI> <LI><A href="#null">Мышление</A></LI> <LI><A href="#null">Воображение</A></LI> <LI><A href="#null">Характер</A></LI> <LI style="height:32px"><img src="../img/dark.gif" width="126" height="32" /></LI> </UL></LI></UL> </td> <td width="126"> <UL id=nav><LI><A href="#null">Власть и Влияние</A><UL> <LI><A href="#null">Пикап</A> </LI> <LI><A href="#null">НЛП</A> </LI> <LI><A href="#null">Гипноз</A></LI> <LI style="height:32px"><img src="../img/dark.gif" width="126" height="32" /></LI> </UL></LI></UL> </td> <td width="126"><UL id=nav><LI ><A href="#null">Совершенство Тела</A><UL> <LI><A href="#null">Анатомия</A></LI> <LI><A href="#null">Физиология</A></LI> <LI><A href="#null">Здоровье</A></LI> <LI><A href="#null">Бодибилдинг</A> </LI> <LI><A href="#null">Атлетика</A></LI> <LI><A href="#null">Гимнастика</A></LI> <LI style="height:32px"><img src="../img/dark.gif" width="126" height="32" /></LI> </UL></LI></UL> </td> <td width="126"> <UL id=nav><LI><A href="#null">Доблесть Воина</A><UL> <LI><A href="#null">Единоборства</A> </LI> <LI><A href="#null">Оружие мира</A></LI> <LI><A href="#null">Точки дзю-до</A></LI> <LI><A href="#null">Самооборона</A></LI> <LI><A href="#null">История битв</A></LI> <LI><A href="#null">Яды</A></LI> <LI style="height:32px"><img src="../img/dark.gif" width="126" height="32" /></LI> </UL></LI></UL> </td> <td width="126"><UL id=nav><LI><A href="#null">Улыбка Арлекина</A> <UL><LI><A href="#null">Игры</A> </LI> <LI><A href="#null">Развлечения</A></LI> <LI><A href="#null">Эротика</A></LI> <LI><A href="#null">Юмор</A></LI> <LI style="height:32px"><img src="../img/dark.gif" width="126" height="32" /></LI> </UL></LI></UL></td> </tr> </table>

Все разобрался!!! =)

Хмм... почему-то в опере картинка ложится корректно - без зазора внизу, а в ИЕ и Фаирфоксе с зазором в несколько пикселей. Кто-нибудь знает как это поправить и убрать зазор? Текущий результат можно посмотреть если подвести курсор под 2-й раздел "Trigger Two" (ссылка http://adrianos.arvixe.ru/CSS.html) Там внизу вложена картинка, но она почему-то выводится с отступом от нижнего края...

Немного по-другому решил проблему - добавил еще 1 пустой элемент списка (LI) в каждый столбец и вставил в него подходящую по размеру и фактуре картинку. Кстати, никто не знает можно ли задать толщину и цвет линии обводки ("<b></b>") для текста? (сорри что не по теме)

ОК! Буду пробовать! Сенк!

Спасибо за ответ! А не подскажешь в какое место кода нужно засунуть абсолютное позиционирование? А то я пока ламер каких ещё поискать... Наверное куда-то сюда... #p7menubar li ul { position: absolute; display: none; background-color: #FFFFFF; border-right: 1px solid #333333; border-bottom: 1px solid #333333; background-image: url(images/p7exp_mgrad.jpg); background-repeat: repeat-x;}

Всем добрый день! Надеюсь кто-то сможет помочь... На своем сайте я хочу реализовать выпадающее меню на чистом CSS в виде раскрывающегося свитка. Условный пример: На данный момент я прикрутил меню по подобию http://www.projectseven.com/tutorials/navi...de/workpage.htm HTML-код (Заранее извиняюсь за длинный код). <link href="p7exp/p7exp.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="p7exp/p7exp.js"></script> <!--[if lte IE 7]> <style> #menuwrapper, #p7menubar ul a {height: 1%;} a:active {width: auto;} </style> <![endif]--> </head> <body onLoad="P7_ExpMenu()"> <div id="menuwrapper"> <ul id="p7menubar"> <li><a href="#">Home</a></li> <li><a class="trigger" href="#">Trigger One</a> <ul> <li><a href="#">Sub 1.1</a></li> <li><a href="#">Sub 1.2</a></li> <li><a href="#">Sub 1.3</a></li> <li><a href="#">Sub 1.4</a></li> </ul> </li> <li><a class="trigger" href="#">Trigger Two</a> <ul> <li><a href="#">Sub 2.1</a></li> <li><a href="#">Sub 2.2</a></li> <li><a href="#">Sub 2.3</a></li> <li><a href="#">Sub 2.4</a></li> <li><a href="#">Sub 2.5</a></li> </ul> </li> <li><a class="trigger" href="#">Trigger Three</a> <ul> <li><a href="#">Sub 3.1</a></li> <li><a href="#">Sub 3.2</a></li> <li><a href="#">Sub 3.3</a></li> <li><a href="#">Sub 3.4</a></li> <li><a href="#">Sub 3.5</a></li> <li><a href="#">Sub 3.6</a></li> <li><a href="#">Sub 3.7</a></li> <li><a href="#">Sub 3.8</a></li> </ul> </li> </ul> <br class="clearit"> </div> </body> </html> CSS-код: body { font-family: "Trebuchet MS", Arial, sans-serif; font-size: 100%; background-color: #FFFFFF; margin: 24px 0; padding: 0; background-image: url(images/p7exp_pbg.jpg); background-repeat: repeat-x;} #menuwrapper {border-top: 1px solid #000; border-bottom: 1px solid #333; background-color: #909090; background-image: url(images/p7exp_mbar.jpg); background-repeat: repeat-x;} .clearit {clear: both; height: 0; line-height: 0.0; font-size: 0;} #p7menubar, #p7menubar ul { padding: 0; margin: 0; list-style: none; font-family: Arial, Helvetica, sans-serif;} #p7menubar a { display: block; text-decoration: none; padding: 5px 10px 5px 10px; border-right: 1px solid #333; font-size: .85em; color: #CCCCCC;} #p7menubar a.trigger { padding: 5px 16px 5px 10px; background-image: url(images/p7PM_dark_south.gif); background-repeat: no-repeat; background-position: right center;} #p7menubar li { float: left; width: 9em;} #p7menubar li ul, #p7menubar ul li { width: 12em;} #p7menubar ul li a { color: #565656; border-right: 0; padding: 3px 12px 3px 16px;} #p7menubar li ul { position: absolute; display: none; background-color: #FFFFFF; border-right: 1px solid #333333; border-bottom: 1px solid #333333; background-image: url(images/p7exp_mgrad.jpg); background-repeat: repeat-x;} #p7menubar li:hover a, #p7menubar a:focus, #p7menubar a:active, #p7menubar li.p7hvr a { color: #000000; background-color: #C19674;} #p7menubar li:hover ul, #p7menubar li.p7hvr ul {display: block;} #p7menubar li:hover ul a, #p7menubar li.p7hvr ul a {color: #000000; background-color: transparent;} #p7menubar ul a:hover {background-color: #606060!important; color: #FFFFFF!important;} #p7menubar li {width: auto;} Всё работает как надо... не хватает только нижней картинки (3-й в примере) , я просто не знаю как её добавить... Подскажите пожалуйста можно ли назначить картинку в нижний край выпадающих пунков CSS меню (в случае свитка - перевернутую первую картинку)?