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

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

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

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

Код html:

<ul class="menu">
    <li><a href="#">Пункт меню 1</a></li>
    <li>
      <a href="#">Пункт меню 2</a>
      <ul>
        <li><a href="#">Подпункт меню 1</a></li>
        <li><a href="#">Подпункт меню 2</a></li>
        <li><a href="#">Подпункт меню 3</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>
      <ul>
        <li><a href="#">Подпункт меню 1</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Пункт меню 5</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>
</ul>

Код css:

.menu{
    padding: 0;
    margin: 0;
    font-size: 100%;
}
.menu li{
    list-style: none;
    float: left;
    height: 33px;
    padding: 0;
    margin: 0;
    width: 150px;
    text-align: center;
    background: #171717;
    position: relative;
    padding-top: 12px;
}
.menu li:hover{
    background: #3E3E3E;
}
.menu li:hover ul{
    display: block;
}
.menu li ul{
    list-style: none;
    padding: 0;
    margin: 0;
    width: 150px;
    display: none;
    position: absolute;
    left: 0;
    top: 45px;
}
.menu li ul li{
    float: none;
    height: 33px;
    margin: 0;
    width: 150px;
    text-align: center;
    background: #7F7F7F;
}
.menu li a{
    display: block;
    width: 150px;
    height: 33px;
    color: #fff;
    text-decoration: none;
}

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

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

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