Не получается сделать выпадающее горизонтальное меню
Страницы: 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;
}
 

Прогон по твиттеру, постинг в 1500 аккунтов
Постинг в твиттер аккаунты, для ускорения индексации ваших сайтов, сателлитов, дорвеев.

Нужно смотреть, что на сайте происходит!
сдвигается графика
в коде не хватает пунктов выпадающего меню и залейте сюда гифку разделителя
в том то и дело) если я делаю выпадающие пункты, то един графика
а в каких пунктах должны быть подпункты и сколько?
да хотя бы в любом пункте один подпункт, дальше я сама смогу))) просто видимо в 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)
Новые темыОбъявленияСвободное общение
12:45 WebVisitor - улучшение и накрутка поведенческих факторов ранжирования вашего сайта. 
09:29 Lottery Partner в поиске партнеров! Самые высокие ставки! 
22:14 АП ИКС 27.03.2020 | Апдейт Яндекс ИКС 27 марта 2020 
21:31 Быстрое продвижение сайта в ТОП Яндекса. Рост трафика и позиций. 
19:15 Продвижение запросов для интернет-магазина - Яндекс Коллекции - 3000 ссылок 
17:36 Какие ещё есть поисковики типа sveta (тайный знак) online 
16:39 3snet - гемблинг, беттинг, форекс, бинарные опционы, майнинг 
14:09 Куплю zennoposter pro 
13:52 Трафик на Ваш зайт - целевой - Яндекс.Дзен 
10:48 Продам сайт займы 
08:17 Прогон по личной базе, больше 1000 трастовых сайтов! Продвижение СЧ и НЧ запросов + рост показателей! Гарантии! 
21:27 Накрутка рейтинга Web of trust (mywot) 
20:28 Нужна оценка сайта 
20:17 Продажа быстрых SSH туннелей. Любые страны с гарантией! 
10:57 Ваш сайт блокируют гос органы? Есть решение! 
10:02 Конкурс статей XRumer 2020 
19:03 Что с трафиком? 
15:52 [b]Webvork [/b]- международная товарная СРА сеть с сертифицированными офферами на Европу. 
15:19 Новостной сайт с ноля 
08:45 Вопрос о курсах 
18:19 Plussy - лучшая партнерка для гемблинг