Выпадающее меню на CSS

Возврат к списку

Сейчас делаю админ панель, для моего сайта-диплома. На данный момент готова только форма регистрации, авторизации и форма восстановления пароля.

Шаблон вытянул из веб архива, в планах хочу поменять шапку, немного её дорисовать. Отписал на email, администраторам нынешнего сайта http://www.nsma.ru. Рассказал что пишу диплом и хочу в конце обучения выполнить, так называемый, курсантский аккорд и интегрировать мои разработки. Вот с нетерпением жду ответа. Т.к. сайт будет многофункциональным, то и разделов меню в административной панели управления, будет много. В связи с этим, пришел к выводу, что практичнее будет сделать выпадающее меню. Меню будем делать на CSS, без Java. Источником сего примера является полезнейший ресурс CSSPlay. HTML код меню выглядит так:

<div class="menu">
    <ul>
        <li><a class="hide" href="">Раздел 1</a> <!--[if lte IE 6]> <a href="">Раздел 1
            <table>
                <tr>
                    <td> <![endif]-->
            <ul>
                <li><a href="" title="">Страница 1</a></li>
                <li><a href="" title="">Страница 1.1</a></li>
                <li><a href="" title="">Страница 1.2</a></li>
            </ul>
            <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li>
        <li><a class="hide" href="">Раздел 2</a> <!--[if lte IE 6]> <a href="">Раздел 2
            <table>
                <tr>
                    <td> <![endif]-->
            <ul>
                <li><a href="" title="">Страница 2</a></li>
                <li><a href="" title="">Страница 2.1</a></li>
                <li><a href="" title="">Страница 2.2</a></li>
                <li><a href="" title="">Страница 2.3</a></li>
                <li><a href="" title="">Страница 2.4</a></li>
                <li><a href="" title="">Страница 2.5</a></li>
            </ul>
            <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li>
    </ul>
</div>

CSS код:

.menu {
    font-family: arial, sans-serif;
    width: 212px;
    height: 100px;
    position: relative;
    font-size: 11px;
    z-index: 100
}

.menu ul li a, .menu ul li a:visited {
    display: block;
    text-decoration: none;
    color: #000;
    width: 104px;
    height: 20px;
    text-align: center;
    color: #fff;
    border: 1px solid #fff;
    background: #710069;
    line-height: 20px;
    font-size: 11px;
    overflow: hidden
}

.menu ul {
    padding: 0;
    margin: 0;
    list-style: none
}

.menu ul li {
    float: left;
    position: relative
}

.menu ul li ul {
    display: none
}

.menu ul li:hover a {
    color: #fff;
    background: #36f
}

.menu ul li:hover ul {
    display: block;
    position: absolute;
    top: 21px;
    left: 0;
    width: 105px
}

.menu ul li:hover ul li a {
    display: block;
    background: #ddd;
    color: #000
}

.menu ul li:hover ul li a:hover {
    background: #6fc;
    color: #000
}
   
Оформление пунктов меню можно менять так как вам хочется. Для IE6 используются дополнительные стили, которые также нужно подключить с помощью условных комментариев:
.menu ul li a.hide, .menu ul li a:visited.hide {
    display: none
}

.menu ul li a:hover {
    color: #fff;
    background: #36f
}

.menu ul li a:hover ul {
    display: block;
    position: absolute;
    top: 21px;
    left: 0;
    width: 105px
}

.menu ul li a:hover ul li a {
    display: block;
    background: #ddd;
    color: #000
}

.menu ul li a:hover ul li a:hover {
    background: #6fc;
    color: #000
}
Вот и все :-) Получилось выпадающее меню на CSS.
>


Возврат к списку