Мой Справочник | CSS | Вертикальное меню

Меню обычно верстается списками в контейнере <nav> или <aside>

Вертикальное меню

HTML:


	<ul class="main-menu">

	    <li><a href="#">О компании</a>>/li>

        <li><a href="#">Услуги</a></li>

        <li><a href="#">Сотрудники</a></li>

        <li><a href="#">Контакты</a></li>

    </ul>

CSS:


					/*Оформляем главное меню, задаём ШИРИНУ, убираем отступы и маркеры пунктов*/
.main-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 150px;
}
/*Оформляем ccылки гл. меню, задаём БЛОЧНЫЙ ВИД, чтобы было удобно нажимать и оформлять*/
/*задаём цвет, внутренние отступы и убираем подчёркивание у ссылок*/
.main-menu a {
    color: #0088CC;
    display: block;
    padding: 8px 14px;
    text-decoration: none;
}
/*ГРАНИЦЫ элементов списков ГЛАВНОГО МЕНЮ*/
.main-menu > li {
    margin-bottom: -1px;
    border: 1px solid #E5E5E5;
}
/*Оформляем поведение ccылок главного меню при наведении*/
.main-menu a:hover {
    color: white;
    background: #0088CC;
}
/*При необходимости можно добавлять активным ссылкам класс active*/

Результат

Вертикальное меню c выпадающим под-меню

Создаём вложенный список в месте выпадающего меню

HTML:


					        <ul class="main-menu2">
            <li><a href="#company">О компании</a></li>
            <li><a href="#services">Услуги</a>
                <ul class="sub-menu">
                    <li><a href="#1">Разработка</a></li>
                    <li><a href="#2">Продвижение</a></li>
                    <li><a href="#3">Контекст</a></li>
                </ul>
            </li>
            <li><a href="#team">Сотрудники</a></li>
            <li><a href="#contacts">Контакты</a></li>
        </ul>

CSS:


			/*ОФОРМЛЯЕМ МЕНЮ, ЗАДАЁМ ШИРИНУ, УБИРАЕМ МАРКЕРЫ И ОТСТУПЫ*/
.main-menu2 {
    width: 180px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/*ОФОРМЛЯЕМ ССЫЛКИ МЕНЮ, ЗАДАЁМ ОТСТУПЫ, ЦВЕТ, ГРАНИЦЫ, УБИРАЕМ ПОДЧЁРКИВАНИЕ ССЫЛОК*/
.main-menu2 a {
    display: block;
    margin-bottom: -1px;
    padding: 8px 14px;
    color: #0088CC;
    text-decoration: none;
    border: 1px solid #E5E5E5;
}

/*ОФОРМЛЕНИЕ ПРИ НАВЕДЕНИИ*/
.main-menu2 a:hover {
    background: #F5F5F5;
}
/*ЭЛЕМЕНТАМ СПИСКА ГЛАВНОГО МЕНЮ ЗАЗАЁМ ОТНОСИТЕЛЬНОЕ ПОЗИЦИОНИРОВАНИЕ*/
.main-menu2 > li {
    position: relative;
}
/*ПОД-МЕНЮ УБИРАЕМ ОТСТУПЫ, МАРКЕРЫ У СПИСКА, ЗАДАЁМ ФОН*/
.main-menu2 .sub-menu {
    margin: 0;
    padding: 0;
    list-style: none;
    background: #FCF8E3;
    position: absolute; /*ВСЕМУ ПОДМЕНЮ ЗАЗАЁМ АБСОЛЮТНОЕ ПОЗИЦИОНИРОВАНИЕ*/
    top: 5px;           /*ПОЗИЦИОНИРУЕМ ПОДМЕНЮ КООРДИНАТАМИ*/
    left: 169px;
    z-index: 10;        /*ЗАДАЁМ КОЭФ. ПЕРЕКЫТИЯ, ЧТОБЫ ПОДМЕНЮ ПЕРЕКРЫВАЛО МЕНЮ ПРИ ПОЯВЛЕНИИ*/
    width: 150px;       /*ЗАДАЁМ ШИРИНУ*/
    display: none;      /*ПРЯЧЕМ ПОДМЕНЮ*/
}
.main-menu2 > li:hover .sub-menu {
    display: block;     /*ОТКРЫВАЕМ ПОДМЕНЮ при НАВЕДЕНИИ*/
}

Результат

О компании
Услуги
Сотрудники
Контакты