Выпадающее меню без javascript

lena1

lena1

クリエイター
LV
0
 
Меню представляет из себя обычный многоуровневый список:

<!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1--><ul id="nav">
&nbsp;&nbsp;<li><a href="">Главная</a></li>
&nbsp;&nbsp;<li><a href="">Товары</a>
&nbsp;&nbsp;&nbsp;&nbsp;<ul>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><a href="">Компьютеры</a></li>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><a href="">Мониторы</a></li>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><a href="">Комплектующие</a></li>
&nbsp;&nbsp;&nbsp;&nbsp;</ul>
&nbsp;&nbsp;</li>
&nbsp;&nbsp;<li><a href="">Услуги</a>
&nbsp;&nbsp;&nbsp;&nbsp;<ul>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><a href="">Сборка</a></li>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><a href="">Ремонт</a></li>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><a href="">Обслуживание</a></li>
&nbsp;&nbsp;&nbsp;&nbsp;</ul>
&nbsp;&nbsp;</li>
&nbsp;&nbsp;<li><a href="">Условия</a></li>
&nbsp;&nbsp;<li><a href="">Карта сайта</a></li>
</ul><!--c2--></div><!--ec2-->

Стиль:

<!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1-->*{
&nbsp;&nbsp;margin:0;
&nbsp;&nbsp;padding:0
}
#nav{
&nbsp;&nbsp;font-size:0.7em;
&nbsp;&nbsp;list-style-type:none;
&nbsp;&nbsp;width:600px;
&nbsp;&nbsp;height:25px;
&nbsp;&nbsp;display:inline-block;
&nbsp;&nbsp;background:#355C96;
&nbsp;&nbsp;line-height:25px
}
&nbsp;&nbsp;#nav li{
&nbsp;&nbsp;&nbsp;&nbsp;float:left;
&nbsp;&nbsp;&nbsp;&nbsp;width:120px;
&nbsp;&nbsp;&nbsp;&nbsp;margin-top:-10000px
&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;#nav li a{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:120px;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text-decoration:none;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text-align:center;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color:#fff;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position:relative;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;float:left;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin-right:-119px;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin-top:10000px
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;#nav li a:hover, #content #nav li a:focus, #content #nav li a:active{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background:#DCE2FC;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin-right:0;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color:#355C96
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;#nav li ul{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background:#6286BD;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;float:left;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin-top:-25px;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding-top:25px;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin-bottom:-10000px;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;list-style-type:none
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#nav li ul li{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;float:none;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin:0;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:auto
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#nav li ul li a{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;float:none;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display:block;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin:0;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin-right:-1px;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background:#6286BD
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<!--c2--></div><!--ec2-->

Демо: :down: <a href="http://alexilin.ru/web/dropdown-menu/" target="_blank">http://alexilin.ru/web/dropdown-menu/</a>
 
А как сделать чтобы бекграунд-линия этой менюшки была на всю ширину форума, насколько я помню параметр в CCS width:100% не работает) или?


Форум IPB 3.0.4
 
Войдите или зарегистрируйтесь для ответа.
Сверху