Многоуровневое выпадающее горизонтальное меню на 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

Читайте также  Выпадающее горизонтальное меню с задержкой на CSS
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...
Кириллица veranda и roboto шрифт. font-family: Verdana, Geneva, sans-serif; font: normal 13px Roboto,arial,sans-serif;
Верстка сетки из ромбов с изображениями... Стала перед нами задача верстки страницы для сайта, где сетка на которой изображения представляются в виде ромбов с ссылками. Пример как сверст...
Простое выпадающее горизонтальное меню на CSS... Пример реализации простого выпадающего горизонтального меню на CSS, без JavaScript. Поддержка всех современных браузеров (IE7+).Код html: П...

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