Простое выпадающее меню

Простейшее меню с выпадающими элементами. Не самое изящное, но самое действенное.

<nav>

<div class="button"><a href="" title="">Продукция</a>

<div class="a"><a href="" title="">Другие</a></div>

</div>

<div class="button"><a href="" title="">Производители</a>

<div class="a"><a href="" title="">Производитель1</a></div>

<div class="a"><a href="" title="">другие</a></div>

</div>

<div class="button"><a href="" title="">О Компании</a>

<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>

</nav>

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;}

Рассказать: