Простое выпадающее меню
Простейшее меню с выпадающими элементами. Не самое изящное, но самое действенное.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<nav> <div class="button"><a href="" title="">Продукция</a> <div class="down"> <div class="a"><a href="" title="">Другие</a></div> </div> </div> <div class="button"><a href="" title="">Производители</a> <div class="down"> <div class="a"><a href="" title="">Производитель1</a></div> <div class="a"><a href="" title="">другие</a></div> </div> </div> <div class="button"><a href="" title="">О Компании</a> <div class="down"> <div class="a"><a href="" title="">Контакты</a></div> <div class="a"><a href="" title="">Руководство</a></div> <div class="a"><a href="" title="">Вакансии</a></div> </div> </div> </nav> |
1 2 3 4 5 6 7 8 |
nav { clear:left; width:100%; height:40px; background: red; text-align: center;} nav .button { display:inline-block; margin:5px 0px; padding:4px 0px; position:relative} nav .button a:hover { background: green; text-decoration:underline } nav .button:hover .down { display:block !important} nav .button .down { display:none; position:absolute; top: 25px; left: 0; z-index:10000} nav .button .down .a { clear:both; padding:10px 5px; background: white; width: 170px} nav .button .down a { line-height:1.5} nav a { padding:10px 7px 12px; border: 0 none; font-size:14px; line-height:1.5;} |
Рассказать: