вебисторий

Создание горизонтального выпадающего меню на чистом CSS

Никита

Для того, чтобы сделать горизонтальное выпадающее меню на чистом CSS 3, для начала нужно сделать html разметку меню такого вида:

<div class="menu">
<ul class="my_menu"> 
    <li class="category">
        <a href="/">Главная</a>
    </li>
    <li class="category">
        <a>Категории</a>
        <ul>	
            <li class="cat-item">
                <a href="">CMS</a>
            </li>
            <li class="cat-item">
                <a href="">PHP</a>
            </li>
            <li class="cat-item">
                <a href="">SQL</a>
            </li>
        </ul> 
    </li> 
    <li class="category">
        <a>Тэги</a>  
        <ul>	
            <li class="cat-item">
                <a href="">Apache</a>
            </li>
            <li class="cat-item">
                <a href="">linux</a>
            </li>
            <li class="cat-item">
                <a href="">windows</a>
            </li>
        </ul> 
    </li>
</ul>
</div>

В результате мы получим следующее:

Это обычное вертикальное меню ul, состоящее из блочных li элементов. С помощью css давайте превратим его в горизонтальное. Для этого к li элементам с классом «category» добавим новые css свойства:

.my_menu .category {
    float: left;
    list-style: none;
}

Теперь элементы с классом category расположатся друг за другом и меню станет горизонтальным.

Добавим новые css свойства к подменю — сделаем его невидимым по умолчанию:

.my_menu .category > ul {
     display: none;
     position: absolute;
}

Делаем подменю выпадающим при наведении курсора мыши, используя css событие hover:

.my_menu .category:hover > ul {
     display: block; 
}

Вот и все. Теперь осталось добавить стили на свое усмотрение, чтобы меню выглядело красиво. Ниже приведу простой пример оформления горизонтального выпадающего меню:

.menu {
        background-image: -webkit-linear-gradient(top,#3c3c3c 0,#222 100%);
        background-image: -o-linear-gradient(top,#3c3c3c 0,#222 100%);
        background-image: -webkit-gradient(linear,left top,left bottom,from(#3c3c3c),to(#222));
        background-image: linear-gradient(to bottom,#3c3c3c 0,#222 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3c3c3c', endColorstr='#ff222222', GradientType=0);
        filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
        background-repeat: repeat-x;
        border-color: #101010;
        border: 1px solid;
    }

    .my_menu {
        display: inline-block;
        margin: 0px;
    }

    .my_menu .category {
        float: left;
        list-style: none;
        padding: 15px 15px;
        cursor: pointer;
    }

    .my_menu .category:hover {
        background: black;
    }

    .my_menu .category > ul {
       display: none;
       position: absolute;
       list-style: none;
       padding-left: 0px;
       border: 1px solid black;
       margin-top: 15px;
       margin-left: -15px;
       z-index: 999;
    }

    .my_menu .category:hover > ul {
       display: block; 
    }

    .my_menu ul {
        background: black;
    }

    .my_menu a {
        color: white;
        text-decoration: none;
    }
     
    li.cat-item {
        padding: 5px 10px;
    }
    
    li.cat-item:hover {
        background: white;
    }
    
    li.cat-item:hover a {
        color: black;
    }

Чтобы центрировать меню посередине блока div, нужно добавить следующее css свойство:

.menu {
   text-align: center;
}