Не получается сделать выпадающее горизонтальное меню
Страницы: 1 2 След.
Не получается сделать выпадающее горизонтальное меню, примеры из сети не помогли
Всем привет. Имеется горизонтальное меню с разделителями, в связи с ростом необходимой информации, встала необходимость сделать выпадающие пункты, но никак не получается, ломается дизайн.
Помогите, плиз)

HTML


Код
<div id="nav">
<ul>
<li><a href="">ГЛАВНАЯ</a></li>
<li class="nav_border"></li>    

<li><noindex><a href="" target="_blank">ЧАТ</a></noindex></li>    
<li class="nav_border"></li>    
<li><a href="">ФОРУМ</a></li> 
<li class="nav_border"></li>
<li><a href="">МУЗЫКА</a></li>           
<li class="nav_border"></li>     
<li><a href="">FREE РОТАЦИЯ</a></li>
<li class="nav_border"></li>
<li><a href="">НАШИ ПАРТНЕРЫ</a></li>
<li class="nav_border"></li>
<li><a href="">Акции</li>
<li class="nav_border"></li>
<li><a href="">ВАКАНСИИ</a></li>
<li class="nav_border"></li>
<li><a href="">РЕКЛАМА</a>
</li>
<li class="nav_border"></li>
<li><a href="">ЗАКАЖИ ТРЕК <noindex><img src="http://s4.rimg.info/001fed561467220cf4cad387a29b7c9b.gif" ></noindex></a>
</li>
</ul>
</div>
 

CSS


Код
.nav_border{
float:left;
width:3px;
margin-top:5px;
height:30px;
background:url(../images/nav_border.gif) no-repeat;
}

#nav ul{  
font-family:"Arial";
width:1100px;
height:40px;
font-size: 13px;
font-weight: bold;
list-style: none;
padding:0 5px;
background: url(../images/nav.png) no-repeat;
}



#nav li
{ 
float: left;
position: relative;
}


#nav li a
{  
font-size: 13px;
font-weight:bold;
color: #FFFFFF;
line-height: 40px;
padding: 0 15px 0 15px;
display: block;
text-align: center;
text-decoration: none;
}


#nav li a:hover {
line-height: 40px;   
z-index:100;
background:url(../images/nav2.gif) repeat-x;
color: #FFFFFF;
text-decoration: none;
}

#nav li ul {
z-index:100;
display: none;
position: absolute;
padding:0;
clear:both;
width:100%;
background:transparent;
}


#nav li:hover ul {
display: block;
clear:both;
}
 
Нужно смотреть, что на сайте происходит!
сдвигается графика
в коде не хватает пунктов выпадающего меню и залейте сюда гифку разделителя
в том то и дело) если я делаю выпадающие пункты, то един графика
а в каких пунктах должны быть подпункты и сколько?
да хотя бы в любом пункте один подпункт, дальше я сама смогу))) просто видимо в css что-то дописать надо)
html

Код
<div id="nav">
<ul id="nav_list">
<li class="nav_border"><a href="">ГЛАВНАЯ</a></li>   

<li class="nav_border"><noindex><a href="" target="_blank">ЧАТ</a></noindex></li>    
    
<li class="nav_border"><a href="">ФОРУМ</a></li> 

<li class="nav_border"><a href="">МУЗЫКА</a>
   <ul class="menu_list">         
      <li><a href="#">рок</a></li>
      <li><a href="#">поп</a></li>
      <li><a href="#">джаз</a></li>
      <li><a href="#">рэп</a></li>
   </ul>
</li>           
     
<li class="nav_border"><a href="">FREE РОТАЦИЯ</a></li>

<li class="nav_border"><a href="">НАШИ ПАРТНЕРЫ</a></li>

<li class="nav_border"><a href="">Акции</li>

<li class="nav_border"><a href="">ВАКАНСИИ</a>
   <ul class="menu_list">         
      <li><a href="#">певец</a></li>
      <li><a href="#">диджей</a></li>
      <li><a href="#">актер</a></li>
      <li><a href="#">босс</a></li>
   </ul>
</li>

<li class="nav_border"><a href="">РЕКЛАМА</a></li>

<li><a href="">ЗАКАЖИ ТРЕК <noindex><img src="http://s4.rimg.info/001fed561467220cf4cad387a29b7c9b.gif" ></noindex></a>
</li>
</ul>
</div>
 
css

Код
#nav ul#nav_list{  
font-family:"Arial";
width:1100px;
height:40px;
font-size: 13px;
font-weight: bold;
list-style: none;
padding:0 5px;
background: url('../images/nav.png') no-repeat;
position: relative;
}

.nav_border{
float:left;
overflow:hidden;
padding-right: 3px;
background:transparent url('../images/nav_border.gif') no-repeat right center;
}

#nav ul#nav_list li a
{  
font-size: 13px;
font-weight:bold;
color: #FFFFFF;
line-height: 40px;
padding: 0 15px 0 15px;
display: block;
text-align: center;
text-decoration: none;
}


#nav ul#nav_list li a:hover {
line-height: 40px;   
background:url('../images/nav2.gif') repeat-x;
color: #FFFFFF;
text-decoration: none;
}

#nav ul#nav_list li ul.menu_list {
position: absolute;
left: -999px;
padding: 0;
background: #000;
list-style: none;
}

#nav ul#nav_list li ul.menu_list li{
overflow:hidden;
}

#nav_list li ul.menu_list li a {
display: block;
text-decoration: none;
line-height: 40px;
}

#nav ul#nav_list li.nav_border:hover ul.menu_list, 
#nav ul#nav_list li.nav_border li:hover ul.menu_list,
#nav ul#nav_list li.nav_border li:hover li ul.menu_list
{
left:auto;
}
 
вроде не получилось тык
ой прошу прощение))) все получилось!!! что-то глюк с обновлением. Большое спасибо))
на "музыке" открывается нормально, а на "вакансиях" что-то мешает...
ничего страшного))) мне главное, что теперь можно делать подпункты)
банер мешает...добавьте выпадающему списку z-index:

Код
 #nav ul#nav_list li ul.menu_list {
position: absolute;
left: -999px;
padding: 0;
background: #000;
list-style: none;
z-index:200;
}
оо все отлично)))) плюсик с удовольствием поставила, но тут такого нет)
мой браузер показывает какие-то пустые ссылки - проверьте...

Рисунок
Страницы: 1 2 След.
Похожие темы:
Читают тему (гостей: 1, пользователей: 0, из них скрытых: 0)
Новые темыОбъявленияСвободное общение
21:54 Turbobit.net - Официальная тема, Costaction ПП 
20:58 Webvork - международная товарная СРА сеть с сертифицированными офферами на Европу. 
20:11 Dao.AD: Монетизация и покупка Push/Pops/Inpage и Video трафика! 
15:14 Adtrafico - Правильная партнёрская сеть под бурж трафик 
19:12 FriendsPartners партнерская программа по Гемблингу 
18:19 Ginads.com - качественно новый тренд на рынке рекламы! 
17:59 Teasermedia.net 
15:23 Обмен/Ввод/Вывод криптовалют и электронных денег в разных странах 
13:43 Ural-obmen.ru — выгодный сервис обмена 
12:59 Obama.ru - безопасный обмен криптовалют и электронных денежных средств 
12:49 [PRIVATE MOBILE PROXY][8 стран][тест всем][скидки внутри] 
11:46 Написание текста по вашему ТЗ 
00:08 Мобильные прокси для софта 
22:20 24ATM - Мультивалютная платформа обмена цифровой валюты 
21:31 Ням-ням! - 8 деликатесов, которые когда-то ели только бедные люди 
20:10 Подтягиваем физкультурку 
11:31 37 противникам прививок от COVID грозят уголовные дела 
10:32 Илон Маск показал, как обезьяна с чипом "телепатической печати" попросила угощение 
10:31 Еврокомиссия пригрозила Twitter санкциями за "российскую пропаганду" 
01:23 Россия может запустить «национальную криптобиржу» 
21:57 Доход Плюс