Выпадающее меню на CSS

HTML код выпадающего меню (уровней может быть меньше):

<ul class="vyp-menu">
  <li><a href="#1">пункт 1</a></li>
  <li><a href="#2">пункт 2</a>
        <ul>
          <li><a href="#2.1">подпункт 2.1</a>
                <ul>
                  <li><a href="#2.1.1">подпункт 2.2.1</a></li>
                  <li><a href="#2.2.2">подпункт 2.2.2</a></li>
                  <li><a href="#2.2.3">подпункт 2.2.3</a>
                      <ul>
                        <li><a href="#2.2.3.1">подпункт 2.2.3.1</a></li>
                        <li><a href="#2.2.3.2">подпункт 2.2.3.2</a></li>
                        <li><a href="#2.2.3.3">подпункт 2.2.3.3</a></li>
                      </ul>
                  </li>
                </ul>
          </li>
          <li><a href="#2.2">подпункт 2.2</a></li>
          <li><a href="#2.3">подпункт 2.3</a></li>
        </ul>
  </li>
  <li><a href="#3">пункт 3</a></li>
</ul>

Пример

• пункт 1
• пункт 2
  
  • подпункт 2.1
    
    • подпункт 2.2.1
    • подпункт 2.2.2
    • подпункт 2.2.3
      
      • подпункт 2.2.3.1
      • подпункт 2.2.3.2
      • подпункт 2.2.3.3
  • подпункт 2.2
  • подпункт 2.3
• пункт 3

CSS для простого многоуровневого выпадающего списка

<style type="text/css">
.vyp-menu, .vyp-menu li, .vyp-menu ul, .vyp-menu a, .vyp-menu:after {
  margin: 0; 
  padding: 0;
  z-index: 200;
  display: block;
}

.vyp-menu:after { /* убираем после меню действие float */ 
  clear: both;
  content: "";}

.vyp-menu > li { float: left; } /* горизонтальное размещение пунктов */

.vyp-menu li {
  white-space: nowrap; /* содержимое на одной строке */ 
  position: relative;
}

.vyp-menu > li, .vyp-menu > li > ul > li, .vyp-menu > li > ul > li > ul > li { overflow: hidden; } /* всё, что за пределами элемента, скрыто */
.vyp-menu > li:hover, .vyp-menu > li > ul > li:hover, .vyp-menu > li > ul > li > ul > li:hover {overflow: visible;}

.vyp-menu li ul li, .vyp-menu li ul li a { width: 100%; }  /* фон подпунктов равной ширины */

.vyp-menu ul { position: absolute; }

.vyp-menu ul ul { left: 100%; top: 0; } /* третий и четвёртый список позиционируется не вниз, а вправо. Можно часть списков повернуть и влево, но тогда width должен быть задан в px */
</style>

Пример.

• пункт 1
• пункт 2
  • подпункт 2.1
    • подпункт 2.2.1
    • подпункт 2.2.2
    • подпункт 2.2.3
      • подпункт 2.2.3.1
      • подпункт 2.2.3.2
      • подпункт 2.2.3.3
  • подпункт 2.2
  • подпункт 2.3
• пункт 3

В дополнение к вышеуказанному CSS для красивого меню

<style type="text/css">
.vyp-menu {
  background: #808080;
  background: -webkit-linear-gradient(#fff, #808080);
  background: -moz-linear-gradient(#fff, #808080);
  background: -o-linear-gradient(#fff, #808080);
  background: -ms-linear-gradient(#fff, #808080);
  background: linear-gradient(#fff, #808080);
  border-radius: 5px;
}

.vyp-menu > li:first-child {border-radius: 5px 0 0 5px; border-left: none;}

.vyp-menu > li {border-left: 1px solid #ccc;}

.vyp-menu > li:hover {background: #fff;}

.vyp-menu li li {background: #fff content-box; padding: 1px 1px 0px 0px; border-right: 1px solid #ccc;}

.vyp-menu li li:last-child {border-radius: 0 0 5px 5px;}

.vyp-menu li a {
  line-height: 40px;
  padding: 0 14px;
  text-decoration: none;
}
</style>

Можно добавить эффект постепенного появления. Вместо

.vyp-menu > li, .vyp-menu > li > ul > li, .vyp-menu > li > ul > li > ul > li { overflow: hidden; }
.vyp-menu > li:hover, .vyp-menu > li > ul > li:hover, .vyp-menu > li > ul > li > ul > li:hover {overflow: visible;}

пишем

.vyp-menu > li > ul > li, .vyp-menu > li > ul > li > ul > li, .vyp-menu > li > ul > li > ul > li > ul > li {
  height: 0px;
  -moz-transition: 0.3s; -o-transition: 0.3s; -webkit-transition: 0.3s; -ms-transition: 0.3s;
  overflow: hidden;}

.vyp-menu > li:hover > ul > li, .vyp-menu > li > ul > li:hover > ul > li, .vyp-menu > li > ul > li > ul > li:hover > ul > li {
  height: 40px;
  overflow: visible;}

Пример

• пункт 1
• пункт 2
  • подпункт 2.1
    • подпункт 2.2.1
    • подпункт 2.2.2 очень длинный предлинный
    • подпункт 2.2.3
      • подпункт 2.2.3.1
      • подпункт 2.2.3.2
      • подпункт 2.2.3.3
  • подпункт 2.2
  • подпункт 2.3
• пункт 3

С помощью псевдоэлементов в примере выше были добавлены знаки +-.

CSS

<style type="text/css">
.strelka:after {
  content: "\2b";
  position: absolute;
  right: 1px; bottom: -4px;
}

.strelka:hover:after {content: "\2d";}
</style>

HTML того li, который будет содержать список

<li class="strelka">...</li>

Похожие статьи:

1. Горизонтальное выпадающее меню для Blogger