Shockwaves
-
Posts
6 -
Joined
-
Last visited
Shockwaves's Achievements
Explorer (1/14)
0
Reputation
-
мне хотя бы сейчас сделать так, потом узнаю что то еще, то уже будет проще
-
согласен, но мне нужно меню без выпадающего списка. А с последней не знаю, пока это можно опустить. Потом думаю сделать так чтобы последний подпункт последней главной лишки отталкивался от правого края навигации
-
да, так же само как и в моем первом примере, у вас получился вертикальный, а мне нужен горизонтальный
-
хотя нет, таблицей тут никак не получится
-
Большое спасибо за ответ, действительно в коде много косяков есть) Некоторые вещи только недавно узнал. Но ваш вариант не совсем работает по примеру. Вот тут #nav ul{ display:none; font-size:12px; line-height:15px; left:0; list-style:none; margin:0; top:100%; padding:0; position:absolute; width: auto; } для width auto ширина похоже берется от родителя, горизонтально пункты не выстраивается, разве что если задать большое значение ширины в пикселях, но это неудачное решение. Может для всего меню лучше использовать таблицу?
-
Доброго времени суток! В процессе работы над простым шаблоном наткнулся на неприятную ситуацию отображения в IE7. Проблема с горизонтальным меню, при выборе в верхней строке пункта, в нижней строке должен появлятся подпункт, прямо под верхним пунктом. Используется скрытие display: none и абсолютное позиционирование подменю. Во всех браузерах все адекватно, а в Ie7 подпункт появляется справа от пункта, а должен быть прямо под ним снизу. <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style> #nav { height: 95px; background: #fff; } #nav ul{ display: block; width: 100%; } #nav ul li{ float: left; display: block; padding: 6px 17px 14px 1px; text-align: left; } #nav ul li.first{ padding-left: 36px; } #nav ul li.last{ padding-right: 15px; } #nav ul li a{ padding: 10px; line-height: 37px; font: bold 14px Verdana, sans-serif; color: #666; } #nav span.podmenu { position: absolute; display: none; padding-top: 30px; background: transparent; vertical-align: bottom; } #nav ul li span.podmenu a { font-size: 13px;} #nav ul li:hover, #nav ul li.active{ background: #58c2d8; } #nav ul li:hover>a, #nav ul li.active>a{ color: #fff; text-decoration: underline; } #nav ul li:hover span.podmenu, #nav ul li.active span.podmenu { display: block; } #nav ul li:hover span.podmenu a:hover{ color: #58c2d8; text-decoration: underline; } </style> </head> <body> <div id="nav"> <ul> <li class="first"><a href='/'>Головна</a></li> <li > <a href='/'>Місцева демократія</a> <span class="podmenu"> <a href='#'>Законодавчи инициативы</a> <a href='#'>Позиции експертив</a> </span> </li> <li><a href='/'>Державна допомога</a></li> <li><a href='/'>Державні закупівлі</a></li> <li><a href='/'>Свідомий вибір</a></li> <li class="last"><a href='/'>Мережа</a> </li> </ul> </div> <!-- #navigation--> </body> </html> Уже даже думаю под таблицу переписать