Горизонтальное выпадающее меню на css

• Раздел карты сайта 1
• Раздел карты сайта 2
• Раздел карты сайта 3

Код HTML меню вставьте в гаджет HTML / Javascript элемента страницы во вкладке Дизайн. Выберите расположение. Сохраните изменения.
Теперь наша задача при помощи стилей создать горизонтальное выпадающее меню css. Полученный код вы вставите перед кодом ]]></b:skin> в редакторе html вашего блога.
Пример CSS для выпадающего меню:
В код css я вставила комментарии, для того, чтобы вы смогли настроить горизонтальное выпадающее меню так, как вам нужно (изменили цвет меню, размеры и пр.)

/*----- CSS код выпадающего меню ----*/
#osn {
    background: #14256C; /*----- Цвет фона основного меню----*/
    width: 290px; /*----- Ширина основного меню----*/     color: #FFF;  
        margin: 0px;
        padding: 0;
        position: relative;
        border-top:0px solid #960100; /*----- Верхняя граница меню: ширина стиль цвет----*/
        height:35px; /*----- Высота меню----*/
}
#menu {
    margin: 0;
    padding: 0;
}
#menu ul {
    float: left; /*----- Выравнивание меню----*/
    list-style: none; /*----- Отсутствие маркеров списка основного меню----*/
    margin: 0;
    padding: 0;
}
#menu li {
    list-style: none; /*----- Отсутствие маркеров списка подменю----*/
    margin: 0;
    padding: 0;
        border-left:1px solid #333; /*----- Граница левая элемента главного меню стиль и цвет----*/
        border-right:1px solid #333; /*----- Граница правая элемента меню----*/
        height:35px; /*----- Высота меню отдельного элемента----*/
}
#menu li a, #menu li a:link, #menu li a:visited {
    color: #FFF;  /*----- Цвет ссылки элемента основного меню ----*/
    display: block;
   font:normal 12px Helvetica, sans-serif;    margin: 0; /*----- Шрифт ссылок основного меню----*/
   padding: 9px 12px 10px 12px; /*----- Отступы ссылки от границ блока, если вы меняете отступы, то нужно изменить ширину меню и высоту основоного меню и отдельного элемента----*/
        text-decoration: none; /*----- Отсутствие подчеркивания ссылки----*/
       
}
#menu li a:hover, #menu li a:active {
    background: #97ABE3; /*----- Цвет элемента основного меню при наведении----*/
    color: #FFF; /*----- Цвет ссылки элемента основного меню при наведении курсора----*/
    display: block;
    text-decoration: none; /*----- Отсутствие подчеркивания ссылки----*/
        margin: 0;
    padding: 9px 12px 10px 12px; /*----- Отступы ссылок при наведении и активных, должны быть равны отступам неактивных ссылок, если не задумано смещение при наведении----*/ 
}
#menu li {
    float: left;
    padding: 0;
}
#menu li ul { 
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 160px;
    margin: 0;
    padding: 0;
}
#menu li ul a {
    width: 140px;
}
#menu li ul ul {
    margin: -25px 0 0 161px;
}
#menu li:hover ul ul, #menu li:hover ul ul ul, #menu li.sfhover ul ul, #menu li.sfhover ul ul ul {
    left: -999em;
}
#menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul, #menu li li li.sfhover ul {
    left: auto;
}
#menu li:hover, #menu li.sfhover {
    position: static;
}
#menu li li a, #menu li li a:link, #menu li li a:visited {
    background: #97ABE3; /*----- Цвет фона выпадающего меню----*/
    width: 120px;
    color: #000; /*----- Цвет неактивных ссылок выпадающего меню----*/
   display: block;
    font:normal 12px Helvetica, sans-serif;
    margin: 0;
    padding: 9px 12px 10px 12px; /*----- Отступы ссылок выпадающего меню----*/
        text-decoration: none;
z-index:9999;
border-bottom:1px dotted #333;
    
}
#menu li li a:hover, #menu li li a:active {
    background: #fff; /*----- Цвет фона выпадающего меню при наведении на пункт----*/
    color: #000; /*----- Цвет наведенной и активной ссылки пункта выпадающего меню----*/
    display: block;     margin: 0;
    padding: 9px 12px 10px 12px; /*----- Отступы наведенных и активных ссылоквыпадающего меню ----*/
        text-decoration: none;
}

Примечание. Если вы добавляете пункты к основному меню, то вы должны обязательно сделать изменения в ширине основного меню – измените значение width: 290px. Вам также придется изменить ширину даже в том случае, если вы просто иначе назовете пункты меню. В противном случае выпадающее меню css будет отображаться некорректно. Изменяют ширину меню путем подбора:

• если у вас получилось меню в 2 ряда, то увеличьте ширину в редакторе html – и просмотрите изменения без сохранения шаблона,
• если в меню образовался “пустой хвост” – часть неполной ячейки, то уменьшите ширину меню.

Если вы захотите изменить высоту меню, то вам придется поменять отступы основного меню и отдельного элемента, а также height (высоту) основного меню и отдельного элемента.
Если у вас будут вопросы по созданию выпадающего меню, то задавайте вопросы в комментариях.