Простое выпадающее горизонтальное меню на 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
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;
Верстка сетки из ромбов с изображениями... Стала перед нами задача верстки страницы для сайта, где сетка на которой изображения представляются в виде ромбов с ссылками. Пример как сверст...
Многоуровневое выпадающее горизонтальное меню на C... Пример верстки многоуровневого выпадающего горизонтального меню на CSS, без JavaScript. Поддержка всех современных браузеров (IE7+). Код html: ...

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