Горизонтальное меню имеет выпадающие вкладки с подпунктами.В работе меню не применяются скрипты JS это делает меню доступным людям с отключенным показом скриптов.Можете добавить пунктов меню и подпунктов,настроить размер и цвет шрифтов,для этого в примере кода есть комментарии в местах гипотетических регулировок.Вы сразу можете проверить код меню на работоспособность,а заодно и поэкспериментировать с изменениями.
Код меню для установки на сайт
<style>
#menu {
/* -- Фон меню --*/
background: #4d4d4d;
border-bottom: 1px solid #abacad;
/* -- Высота меню --*/
height: 37px;
margin-bottom: 15px;
/* -- Размер шрифта меню --*/
font-size: 16px;
/* -- Закругляем углы --*/
-ms-border-radius: 5px 5px 5px 5px;
-o-border-radius: 5px 5px 5px 5px;
-khtml-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
/* -- Добаляем тени --*/
-ms-box-shadow: 0px 2px 2px #DDDDDD;
-o-box-shadow: 0px 2px 2px #DDDDDD;
box-shadow: 0px 2px 2px #DDDDDD;
padding: 0px 5px;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu > ul > li {
position: relative;
float: left;
z-index: 20;
}
#menu > ul > li:hover {
/* -- Цвет фона ссылок подменю --*/
background: #535353;
}
#menu > ul > li > a {
/* -- Размер шрифта подменю --*/
font-size: 15px;
/* -- Цвет ссылок подменю --*/
color: #FFF;
line-height: 14px;
text-decoration: none;
display: block;
/* -- Отступы подменю --*/
padding: 12px 15px 11px 15px;
z-index: 6;
position: relative;
}
#menu > ul > li > div {
display: none;
background: #FFFFFF;
position: absolute;
z-index: 5;
padding: 5px;
border: 1px solid #034281;
-o-border-radius: 0px 0px 5px 5px;
-ms-border-radius: 0px 0px 5px 5px;
-khtml-border-radius: 0px 0px 5px 5px;
border-radius: 0px 0px 5px 5px;
background: url('http://delaisait.ucoz.ru/script/img/1/dsgvm.png');
}
#menu > ul > li:hover > div {
display: table;
}
#menu > ul > li > div > ul {
display: table-cell;
}
#menu > ul > li ul + ul {
padding-left: 20px;
}
#menu > ul > li ul > li > a {
text-decoration: none;
padding: 4px;
color: #FFFFFF;
display: block;
white-space: nowrap;
min-width: 120px;
}
#menu > ul > li ul > li > a:hover {
background: #638aff;
}
#menu > ul > li > div > ul > li > a {
color: #FFFFFF;
}
</style>
<div id="menu">
<ul>
<li>
<a href="#">Главная</a>
<div>
<ul>
<li><a href="#">Скрипты для uCoz</a></li>
<li><a href="#">Фоны</a></li>
<li><a href="#">Справочник CSS3</a></li>
<li><a href="#">Полезные ресурсы</a></li>
<li><a href="#">Финал</a></li>
</ul>
</div>
</li>
<li><a href="#">Генератор меню</a>
</li>
<li><a href="#">Генератор градиентов</a>
</li>
<li><a href="#">Контакты</a>
<div>
<ul>
<li><a href="#">Е - майл</a></li>
<li><a href="#">Сайт</a></li>
<li><a href="#">Страница соц сети</a></li>
<li><a href="#">Местоположение</a></li>
</ul>
</div>
</li>
</ul>
</div>
| 
