Многоуровневое выпадающее горизонтальное меню на CSS

Многоуровневое выпадающее горизонтальное меню на CSS

Постер - Многоуровневое выпадающее горизонтальное меню на CSS

Пример верстки многоуровневого выпадающего горизонтального меню на CSS, без JavaScript. Поддержка всех современных браузеров (IE7+).

Код html:

<div class="menu">
    <ul>
        <li><a href="#">Пункт меню 1</a>
            <ul>
                <li><a href="#">Подпункт меню 1</a></li>
                <li><a href="#">Подпункт меню 2</a>
                    <ul>
                        <li><a href="#">Подпункт меню 2.1</a></li>
                        <li><a href="#">Подпункт меню 2.2</a>
                            <ul>
                                <li><a href="#">Подпункт меню 2.2.1</a></li>
                                <li><a href="#">Подпункт меню 2.2.2</a></li>
                                <li><a href="#">Подпункт меню 2.2.3</a></li>
                                <li><a href="#">Подпункт меню 2.2.4</a></li>
                                <li><a href="#">Подпункт меню 2.2.5</a></li>
                                <li><a href="#">Подпункт меню 2.2.6</a></li>
                                <li><a href="#">Подпункт меню 2.2.7</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Подпункт меню 2.3</a></li>
                        <li><a href="#">Подпункт меню 2.4</a></li>
                    </ul>
                </li>
                <li><a href="#">Подпункт меню 3</a></li>
                <li><a href="#">Подпункт меню 4</a></li>
            </ul>
        </li>
        <li><a href="#">Пункт меню 2</a>
            <ul>
                <li><a href="#">Подпункт меню 1</a></li>
                <li><a href="#">Подпункт меню 2</a></li>
            </ul>
        </li>
        <li><a href="#">Пункт меню 3</a>
            <ul>
                <li><a href="#">Подпункт меню 1</a></li>
                <li><a href="#">Подпункт меню 2</a></li>
                <li><a href="#">Подпункт меню 3</a></li>
                <li><a href="#">Подпункт меню 4</a></li>
                <li><a href="#">Подпункт меню 5</a></li>
            </ul>
        </li>
        <li><a href="#">Пункт меню 4</a></li>
        <li><a href="#">Пункт меню 5</a></li>
    </ul>
</div>

Код css:

.menu{
    padding:0 0 20px;
    text-align:center;
}
.menu ul{
    display:block;
    height:40px;
    padding:0 20px;
    background:#F47F20;
}
.menu li{
    display:inline-block;
    margin:0 -2px;
    position:relative;
}
.menu li a{
    display:block;
    height:20px;
    padding:10px 15px;
    line-height:20px;
    color:#fff;
    font-weight:700;
    text-decoration:none;
    /*outline:1px solid crimson;*/
}
.menu li a:hover{
    background:#2C3093;
}
.menu li ul{
    height:auto;
    background:#2C3093;
    display:none;
    position:absolute;
    top:40px;
    left:0;
    z-index:5;
    width:230px;
    text-align:left;
    font-size:90%;
    padding:0;
}
.menu li:hover > a{
    background:#2C3093;
}
.menu li li{
    display:block;
}
.menu li li a{
    height:auto;
    padding:7px 10px;
}
.menu li li a:hover{
    background:#F47F20;
}
.menu li:hover > ul{
    display:block;
}
.menu li li ul{
    top:0;
    left:230px;
}
.menu li li:hover > a{
    background:#F47F20;
}

Пример: http://codepen.io/belka/pen/MwLXpy

Читайте также  Многоуровневое выпадающее меню JQuery, CSS
Верстка сетки из ромбов с изображениями... Стала перед нами задача верстки страницы для сайта, где сетка на которой изображения представляются в виде ромбов с ссылками. Пример как сверст...
Простое выпадающее горизонтальное меню на CSS... Пример реализации простого выпадающего горизонтального меню на CSS, без JavaScript. Поддержка всех современных браузеров (IE7+).Код html: П...
Выпадающее горизонтальное меню с задержкой на CSS... Пример реализации выпадающего горизонтального меню с задержкой на CSS, без JavaScript. Показанное нами ранее Простое выпадающее горизонтальное ме...
CSS Styling Radio Button and Checkboxes The idea is simple. We want to change the look and feel of existing radio buttons into more of a push button. The above image pretty much t...

Сохрани, чтобы не потерять