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

Горизонтальное меню

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 {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid #E5E5E5;
    background: none;
}
.main-menu li {
    display: inline-block; /*ЗАДАЁМ СТР-БЛ.ВИД ЭЛ. СПИСКА для горизонтнального расположения*/
    margin-right: -4px;    /*Расстояние между элементами списка*/
    white-space: nowrap;   /*ЧТОБЫ НЕ ПЕРЕНОСИЛОСЬ ВТОРОЕ СЛОВО на новую строку*/
}
/*Cсылки делаем блочными, благодаря чему управляем размерами и оформляем*/
.main-menu a {
    color: #0088CC;
    display: block;
    padding: 8px 10px;
    background-color: #F5F5F5;
    border-left: 1px solid #E5E5E5;
    margin-left: -1px;
    text-decoration: none;
}
/*Cсылки при наведении*/
.main-menu a:hover {
    background: #EEEEEE;
}

Результат

Горизонтальное меню 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="#team">Контакты</a></li>

							</ul>

CSS:


				/*ОФОРМЛЯЕМ МЕНЮ, УБИРАЕМ ОТСТУПЫ, МАРКЕРЫ*/
.main-menu2 {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid #E5E5E5;
}
/*ДЕЛАЕМ ЭЛ. СПИСКА СТРОЧНЫМИ, ТОЛЬКО 1-ГО УРОВНЯ, Т.К. ПОДМЕНЮ БУДЕТ ВЕРТИКАЛЬНОЕ*/
.main-menu2 > li {
    display: inline-block;
    margin: 0px;
    position: relative; /*ЗАВАДАЁМ ОТН. ПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТАМ СПИСКА МЕНЮ*/
}
/*ССЫЛКИ-БЛОЧНЫЕ, ОФОРМЛЯЕМ ИХ*/
.main-menu2 a {
    display: block;
    text-decoration: none;
    margin-right: -5px;
    padding: 8px 10px;
    color: #0088CC;
    border-right: 1px solid #E5E5E5;
}
/*ССЫЛКИ ПРИ НАВЕДЕНИИ*/
.main-menu2 a:hover {
    background: #f5f5f5;
}
/*ОФОРМЛЯЕМ ПОДМЕНЮ*/
.main-menu2 .sub-menu {
    margin: 0;
    padding: 0;
    list-style: none;
    background: #FCF8E3;
    position: absolute;/*ЗАВАДАЁМ АБС. ПОЗ-НИЕ ВСЕМУ ПОДМЕНЮ, ЗАДАЁМ ШИРИНУ, КООРДИНАТЫ*/
    width: 150px;
    left: 1px;
    display: none;/*ПРЯЧЕМ ПОДМЕНЮ*/
}
/*ОФРМЛЯЕМ ССЫЛКИ ПОДМЕНЮ*/
.main-menu2 .sub-menu a {
    border: 1px solid #E5E5E5;
    margin: -1px;
}
/*ПОКАЗЫВАЕМ ПОДМЕНЮ при наведении*/
.main-menu2 > li:hover .sub-menu {
    display: block;
}

Результат

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