Многоуровневое меню на CSS

Тема данного урока посвящена созданию многоуровневого меню. Чаще всего, такая достаточно сложная структура навигации применяется в онлайн каталогах и в подобных им интернет-ресурсах. Для примера возьмем всем известную тему питания, а в качестве каталога в этом примере выступит многоуровневое меню какого-либо ресторана. Для него и создадим навигацию с несколькими уровнями вложенности.

Структура меню формируется html кодом и не представляет собой ничего сложного, так как состоит всего из двух элементов: ссылки (a) и списки (ul). Html код для нашего воображаемого ресторана приведен ниже.

<ul class="nav">
        <li><a href="#">Главная</a></li>
        <li><a href="#">Меню</a>
        	<ul>
            	<li><a href="#">Гарниры</a></li>
                <li><a href="#">Супы</a></li>
                <li><a href="#">Салаты</a></li>
                <li><a href="#">Десерты</a></li>
            </ul>
        </li>
        <li><a href="#">Бар</a>
        	<ul>
            	<li><a href="#">Водка</a></li>
                <li><a href="#">Вина</a>
                	<ul>
                    	<li><a href="#">Красные</a></li>
                        <li><a href="#">Белые</a></li>
                    </ul>
                </li>
                <li><a href="#">Пиво</a>
                	<ul>
                    	<li><a href="#">Бутылочное</a></li>
                        <li><a href="#">Бочковое</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">О нас</a></li>
        <li><a href="#">Контакты</a></li>
    </ul>

Подключение стилей так же не должно составить особою трудность, так как для этого достаточно всего лишь базовому списку с основными пунктами навигации задать класс nav и подключить css файл со следующими стилями:

.nav{
    width:100%;
    height:36px;
    background:#C2EBFF;
    border-bottom:#6D96C4 solid 3px;
}

.nav li{
    float:left;
    position:relative;
    list-style:none;
    background:#C2EBFF;
}

.nav a{
    font-weight:bold;
    text-decoration:none;
    display:block;
    padding:8px 20px;
    color:#667F9B;
}

.active a, .nav li:hover > a{
    background:#6D96C4;
    color:#C2EBFF;
}

.nav ul {
    visibility:hidden;
    padding:0;
    width:150px;
    position:absolute;
    z-index:0;
}

.nav li:hover > ul{
    visibility:visible;
}

.nav ul li{
    float:none;
    margin:0;
    border:#6D96C4 solid 1px;
    border-top:none;
}

.nav ul li:first-child{
    border-top:#6D96C4 solid 3px;
}

.nav ul a{
    font-weight:normal;
    color:#667F9B;
}

.nav ul ul{
    left:145px;
    top:-3px;
    z-index:1;
}

.nav ul li:hover > a{
    background:#C2EBFF;
    color:#667F9B;
    text-decoration:underline;
}

На этом все действия для создания многоуровнего меню заканчиваются. Кстати, может кому то придется по вкусу другое необычное круговое меню на css.  На этом все, всего доброго, RootHelp – все для реализации ваших идей!