Не получается сделать выпадающее горизонтальное меню
Страницы: 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)
Новые темыОбъявленияСвободное общение
00:46 Adsense - или как стать иноагентом 
23:17 TeaserNet - тизерная сеть нового поколения! Высокие доходы, стабильные выплаты 
21:41 Turbobit.net - Официальная тема, Costaction ПП 
19:18 Супер-партнерка PayV: избранные офферы в топовых нишах 
18:25 ТЗ для копирайтера (Excel) + программа ПланМейкер (Tskb) от TaskБилдер и Семён Ядрён 
17:46 Trafee.com – эффективная монетизация вашего дейтинг трафика 
16:54 Marketcall - международная партнерская сеть с оплатой Pay Per Call и LeadGen 
09:05 Продвижение в яндекс топ 1-3 от 20.000 р в месяц 
23:04 SuperBit - Начни зарабатывать! 
20:08 BTCKASSA.NET - Автоматический обмен Криптовалют! 
19:56 Конфиденциальный и быстрый обмен валют с BitHowen.com ! Qiwi,Visa/MC UAH,RUB,USDT,BTC! Криптомаэстро @BitHowen делает все красиво, как по нотам! 
16:09 Oborot.net - обмен валют онлайн 
14:57 Coindrop.trade - обменник электронных валют 
14:31 LucPey - Первоклассный обменник криптовалют 
09:12 37 противникам прививок от COVID грозят уголовные дела 
00:55 22-летний студент стал миллионером продав более 500 селфи в формате NFT 
14:26 "Революционная идея": эксперты поддержали решение правительства о введении бесплатного доступа к значимым интернет-ресурсам 
20:55 NaZapad — 19-я онлайн-конференцию по SEO-продвижению 
14:43 Объявился правообладатель на купленный сайт 
02:46 Оцените сайт - Софт портал 
23:26 В майкрософт чего то знают