Как сделать выпадающие меню

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

Горизонтальное выпадающее меню используется для упорядочения структуры навигации по сайту. Оптимальное количество уровней вложения — один-два. Чем меньше уровней вложений, тем легче посетителю сайта найти нужную информацию. Как создать обычное горизонтальное меню, подробно изложено в этом уроке.

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

1. HTML-разметка и базовые стили для выпадающего меню с одним уровнем вложения

HTML-разметка горизонтального выпадающего меню отличается от обычного меню тем, что к нужному элементу списка

  • добавляется вложенный список
      или .Для позиционирования вложенного меню относительно основного меню объявляются следующие стили:— для элемента списка, в который вложен выпадающий список: li {position: relative;};— для выпадающего меню ul {position: absolute;}, а также значения left и top.Для наглядности и удобства форматирования добавим основному меню класс topmenu, выпадающему — submenu.Скрыть выпадающее меню можно несколькими способами:1) display: none;2) visibility: hidden;3) opacity: 0;4) transform: scaleY(0);5) с помощью библиотеки jQuery.See the Pen MaObbz by Elena Nazarova (@nazarelen) on CodePen.

      Способ 1. {display: none;}

      Выпадающее меню скрывается с помощью .submenu {display: none;}, при наведении показывается с помощью .topmenu li:hover .submenu {display: block;}.

      Способ 2. {visibility: hidden;}

      Меню скрывается с помощью .submenu {visibility: hidden;}, показывается — .topmenu li:hover .submenu {visibility: visible;}.

      Способ 3. {opacity: 0;}

      Меню скрывается с помощью .submenu {opacity: 0;}, показывается — .topmenu li:hover .submenu {opacity: 1;}. Чтобы меню не появлялось при наведении на область, где оно расположено, добавляем visibility: hidden;, а при наведении меняем на visibility: visible;.

      Способ 4. {transform: scaleY(0);}

      Меню скрывается с помощью .submenu {transform: scaleY(0);}, показывается — .topmenu li:hover .submenu {transform: scaleY(1);}. Поскольку трансформация элемента по умолчанию происходит из центра, нужно добавить для .submenu {transform-origin: 0 0;}, т.е. из верхнего левого угла.

      Способ 5. С помощью jQuery

      $(«.five li ul»).hide(); // скрываем выпадающее меню $(«.five li:has('.submenu')»).hover( function(){ $(«.five li ul»).stop().fadeToggle(300);} /* отбираем элемент списка, который содержит элемент с классом .submenu и добавляем ему функцию при наведении, которая показывает и скрывает выпадающее меню */ );

      2. 3D выпадающее меню

      Интересные эффекты можно создавать с помощью CSS3-трансформаций, например, заставить меню появляться из глубины экрана.See the Pen OyjVJZ by Elena Nazarova (@nazarelen) on CodePen.

      • Home
      • Shop
      • Blog
        • Category
        • Author
        • Archive
        • Tags
      • Portfolio
        • Category
        • Author
        • Archive
        • Tags
      • Contact

      * { box-sizing: border-box; } body { margin: 0; background: radial-gradient(#BFD6E2 1px, rgba(255,255,255,0) 2px); background-size: 10px 10px; } nav ul { list-style: none; margin: 0; padding: 0; } nav a { display: block; text-decoration: none; outline: none; transition: .4s ease-in-out; } .topmenu { backface-visibility: hidden; background: rgba(255,255,255,.8); } .topmenu > li { display: inline-block; position: relative; } .topmenu > li > a { font-family: 'Exo 2', sans-serif; height: 70px; line-height: 70px; padding: 0 30px; font-weight: bold; color: #003559; text-transform: uppercase; } .down:after { content: «f107»; margin-left: 8px; font-family: FontAwesome; } .topmenu li a:hover { color: #E6855F; } .submenu { background: white; border: 2px solid #003559; position: absolute; left: 0; visibility: hidden; opacity: 0; z-index: 5; width: 150px; transform: perspective(600px) rotateX(-90deg); transform-origin: 0% 0%; transition: .6s ease-in-out; } .topmenu > li:hover .submenu{ visibility: visible; opacity: 1; transform: perspective(600px) rotateX(0deg); } .submenu li a { color: #7f7f7f; font-size: 13px; line-height: 36px; padding: 0 25px; font-family: 'Kurale', serif; }

      3. Разворачивающееся выпадающее меню с логотипом

      В этом примере в верхнем разделе страницы расположены логотип и навигация по сайту. В качестве логотипа может быть картинка или текст. Выпадающее меню постепенно разворачивается из-под элемента верхнего списка с помощью функции CSS3-трансформации.

      See the Pen vXBBaa by Elena (@html5book) on CodePen.

      * { box-sizing: border-box; } body { margin: 0; background: #f2f2f2; } header { background: white; text-align: center; } header a { text-decoration: none; outline: none; display: block; transition: .3s ease-in-out; } .logo { color: #D5B45B; font-family: 'Playfair Display', serif; font-size: 2.5em; padding: 20px 0; } nav { display: table; margin: 0 auto; } nav ul { list-style: none; margin: 0; padding: 0; } .topmenu:after { content: «»; display: table; clear: both; } .topmenu > li { width: 25%; float: left; position: relative; font-family: 'Open Sans', sans-serif; } .topmenu > li > a { text-transform: uppercase; font-size: 14px; font-weight: bold; color: #404040; padding: 15px 30px; } .topmenu li a:hover { color: #D5B45B; } .submenu-link:after { content: «f107»; font-family: «FontAwesome»; color: inherit; margin-left: 10px; } .submenu { background: #273037; position: absolute; left: 0; top: 100%; z-index: 5; width: 180px; opacity: 0; transform: scaleY(0); transform-origin: 0 0; transition: .5s ease-in-out; } .submenu a { color: white; text-align: left; padding: 12px 15px; font-size: 13px; border-bottom: 1px solid rgba(255,255,255,.1); } .submenu li:last-child a { border-bottom: none; } .topmenu > li:hover .submenu { opacity: 1; transform: scaleY(1); }

      4. Увеличивающееся выпадающее меню

      Ещё один пример для выпадающего меню. Эффект увеличения при появлении меню реализуется за счет уменьшения первоначального размера .submenu {transform: scale(.8);}, при наведении размер увеличивается до .topmenu > li:hover .submenu {transform: scale(1);}.

      See the Pen aNbGKv by Elena Nazarova (@nazarelen) on CodePen.

      • Home
      • Shop
      • Blog
        • Category
        • Author
        • Archive
        • Tags
      • Portfolio
        • Category
        • Author
        • Archive
        • Tags
      • Contact

      * { box-sizing: border-box; } body { margin: 0; background: url(https://html5book.ru/wp-content/uploads/2015/10/background54.png) } nav { background: white; } nav ul { list-style: none; margin: 0; padding: 0; } nav a { text-decoration: none; outline: none; display: block; transition: .4s ease-in-out; } .topmenu { text-align: center; padding: 10px 0; } .topmenu > li { display: inline-block; position: relative; } .topmenu > li:after { content: «»; position: absolute; right: 0; width: 1px; height: 12px; background: #d2d2d2; top: 16px; box-shadow: 4px -2px 0 #d2d2d2; transform: rotate(30deg); } .topmenu > li:last-child:after { background: none; box-shadow: none; } .topmenu > li > a { padding: 12px 26px; color: #767676; text-transform: uppercase; font-weight: bold; letter-spacing: 1px; font-family: 'Exo 2', sans-serif; } .topmenu li a:hover { color: #c0a97a; } .submenu { position: absolute; left: 50%; top: 100%; width: 210px; margin-left: -105px; background: #fafafa; border: 1px solid #ededed; z-index: 5; visibility: hidden; opacity: 0; transform: scale(.8); transition: .4s ease-in-out; } .submenu li a { padding: 10px 0; margin: 0 10px; border-bottom: 1px solid #efefef; font-size: 12px; color: #484848; font-family: 'Kurale', serif; } .topmenu > li:hover .submenu { visibility: visible; opacity: 1; transform: scale(1); }

      5. Подъезжающее выпадающее меню

      Горизонтальное меню с мини-анимацией: при наведении на ссылки верхнего меню появляется маленький кружок, который также сопровождает появление выпадающего меню.

      See the Pen MpqypG by Elena Nazarova (@nazarelen) on CodePen.

      • Home
      • Shop
      • Blog
        • Category
        • Author
        • Archive
        • Tags
      • Portfolio
        • Category
        • Author
        • Archive
        • Tags
      • Contact

      Источник: https://html5book.ru/vypadayushee-menu/

      Как создать в CSS выпадающее меню?

      От автора: всех приветствую. Почему-то выпадающее меню у веб-мастеров ассоциируется со скриптами, но уже давно сделать такую навигацию можно абсолютно спокойно на чистом css. Причем такое меню будет ничем не хуже. Сегодня я вам покажу, как создать в css выпадающее меню. Поделюсь, так сказать, рецептом.

      План урока и разметка нашего меню

      В общем-то, сначала определимся с тем, как будем создавать само меню. В html5 стандартным способом считается создавать его в контейнере nav с помощью маркированного списка. Давайте именно так и сделаем. Маркеры мы позже уберем с помощью css, в меню они нам совершенно не нужны.

      Собственно, я сразу напишу в html разметку с вложенными списками. То есть наши список будет двухуровневым – в нем будут другие списки. А именно, на каждый пункт 1 список, который и будет формировать выпадающее меню.

      Тут есть важный момент, который заключается в том, что вам, возможно, не нужно каждый пункт делать выпадающим, а лишь некоторые. Без проблем, тогда в пунктах без выпадения просто не создаем вложенных списков.

      Собственно, вот она, вся разметка:

      Практический курс по верстке адаптивного сайта с нуля!

      Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

      Узнать подробнее

      Пункт 1ПодпунктПодпунктПодпунктПункт 2ПодпунктПодпунктПодпунктПункт 3ПодпунктПодпунктПодпунктПункт 4ПодпунктПодпунктПодпункт

      Я понимаю, что она огромна. В этом-то и проблема вложенных списков, что требуется писать много кода. Но учитывайте тот факт, что мы делаем 4 основных пункта и для каждого будет выпадающее меню.

      Собственно, я задал всей навигации идентификатор nav, а всем вложенным спискам – стилевой класс second, чтобы понимать, что они являются вложенными.

      Отлично, разметка у нас готова, можно посмотреть на результат:

      Да уж, выглядит ужасно. Но сейчас мы включим в работу css и уже через несколько минут наша навигация преобразится. Давайте работать.

      Пишем css-стили

      Первое, что я сделаю, это сброшу все отступы по умолчанию для всех элементов. Они нам будут только мешать, лучше зададим потом отступы сами, где это понадобится.

      Далее я пропишу общие стили для самого меню, а также для списков, чтобы убрать у них маркеры.

      Теперь нам нужно, собственно, решить, каким будет наше меню. Горизонтальным или вертикальным? Я предлагаю сначала сделать горизонтальное и посмотреть все на его примере. Для этого нужно написать такие стили:

      Обратите внимание

      Заметьте, что с помощью знака > мы обращаемся к пунктам списка, который непосредственно вложены в ul, а тот непосредственно вложен в nav. Это очень важно, так как позволяет не применить стиль к пунктам вложенных списков. Дело в том, что по моей задумке в главном списке пункты будут располагаться горизонтально, а во вложенных – вертикально.

      Но вы, конечно, можете делать по-другому, в согласии со своей задумкой. Вы можете сделать так, чтобы все пункты были в одну строчку.

      В любом случае, вышеприведенный код, я надеюсь, вы понимаете. Он заставляет пункты главного списка прижиматься к левому краю, так что все они встают в одну строку, хотя и являются блочными элементами. Также я задал им явную ширину и относительное позиционирование.

      Для чего позиционирование? Оно необходимо для того, чтобы потом абсолютно позиционировать вложенные списки. Если вы изучали позиционирование в css, то наверняка знаете, что если задать блоку относительное позиционирование, то все элементы в нем можно будет позиционировать абсолютно внутри именно этого блока, а не всего окна браузера.

      Тем временем, вот что у нас уже получилось:

      По этому скриншоту вы можете уже представить себе примерный результат. Конечно, нам еще предстоит красиво оформить пункты, чтобы глаза не умоляли о пощаде при просмотре навигации.

      Далее мы с вами преобразим внешний вид нашего меню. Вот такие стили для этого я прописал ссылкам:

      border: 1px solid #060A13;

      Во-первых, сами ссылки нужно сделать блочными. Это необходимо для того, чтобы работали внутренние отступы и корректно применялись все свойства. Далее указываю цвета фона, текста, параметры рамки, внутренние отступы и выравнивание текста по центру. Наконец, отменяю подчеркивание ссылок.

      Все эти параметры не обязательно прописывать так, как это сделал я. Цвета вы можете выбрать произвольно, рамку сделать другую или вообще не использовать, отступы можно уменьшать или увеличивать.

      Заметьте, что в данном случае мы не использовали знак >, поэтому указанные правила применятся ко всем ссылкам, в том числе и тем, что находятся во вложенных пунктах. Итак, теперь имеем следующее:

      Важно

      Отлично, но ведь вы понимаете, что подпункты не должны быть видно, они должны раскрываться при наведении на нужный пункт. Без этого наше меню похоже на таблицу. Что ж, самое время спрятать вложенные пункты.

      Практический курс по верстке адаптивного сайта с нуля!

      Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

      Узнать подробнее

      Во-первых, скрываем полностью вложенные списки. Во-вторых, задаем им абсолютное позиционирование и координату top: 100%. Это означает, что выпадающее меню будет отображаться четко под основным пунктом, которому принадлежит, четко под 100% высоты этого пункта.

      Теперь мы видим на веб-странице только основное меню, что нам и нужно.

      Реализуем выпадение

      Нам осталось сделать самое главное – реализовать само выпадение. В этом нет ничего сложного, смотрите на этот код:

      Этот код будет работать безукоризненно. При наведении на пункт основного меню, вложенный список будет становиться видимым. Причем только тот список, что вложен в пункт, на который наводится курсор.

      Есть только одна незначительная проблема – ширина вложенных пунктов не соответствует ширине основных. Но это очень легко решается дописыванием соответствующих стилей:

      Все, проблема решена:

      Все работает отлично. При наведении на основной пункт появляется соответствующее ему выпадающее меню. Если убрать курсор в сторону – оно пропадает. Если перевести курсор на сами вложенные пункты, то можно будет по ним кликнуть и перейти в нужный раздел сайта. Таким образом, мы сделали с вами очень простое и легкое выпадающее меню абсолютно без скриптов.

      Переделываем меню в вертикальное

      Ну хорошо, с горизонтальной навигацией мы с вами полностью разобрались, но ведь помимо нее на сайтах очень часто встречается и вертикальная и она тоже может быть выпадающей. На самом деле переделать меню с горизонтального на вертикальное очень легко, нам придется изменить буквально пару строк кода.

      Во-первых, вам нужно будет убрать float:left у главных пунктов списка. Именно это свойство способствует тому, что наши пункты отображаются в одну строку, но зачем нам это, если навигация должна быть вертикальной?

      Совет

      Теперь остается изменить правила для селектора #nav li .second, то есть для вложенных списков, а именно, их нужно немного по-другому позиционировать. Вот так:

      То есть необходимо прописать две координаты вместо одной. Во-первых, в случае с горизонтальной навигацией я говорил, что по задумке пункты вложенных меню должны отображаться под основными пунктами. В случае с вертикальным меню это не подходит – пункты должны отображаться сбоку.

      Поэтому изменяем top: 100% на left: 100%. Кроме этого, координата top нам тоже нужна. Задаем ей 0, чтобы вложенное меню находилось на одном уровне с пунктом, которому соответствуют.

      Все, теперь все работает так, как надо. Можете протестировать. Как видите, я не врал, когда говорил, что придется переписать всего несколько строк кода.

      Горизонтальное меню с несколькими уровнями

      Используя примерно такой же подход вы можете создать больше уровней меню, если это сильно необходимо. Например, давайте создадим для четвертого пункта главного меню список, который будет вложен в один из подпунктов.

      Пункт 4ПодпунктПодпункт подпунктаПодпункт подпунктаПодпунктПодпункт

      Опять же, разметка превращается в громоздкую и непонятную, но если вы будете внимательным, то увидите, в чем здесь вся суть. Далее работаем с css:

      Соответственно, убираем вложенное меню третьего уровня с экрана, делаем ему абсолютное позиционирование и прописываем такие координаты, как в случае с вертикальным меню. То есть данный список будет отображаться при наведении на первый подпункт четвертого пункта и будет отображаться сбоку.

      Внимание! Чтобы абсолютное позиционирование работало для списка third, у списков second должно быть задано относительное позиционирование. Но как, если мы же задавали для него абсолютное позиционирование?

      Что ж, если вам нужно меню трех уровней, то придется убирать у second абсолютное позиционирование, а у главных пунктов убирать относительное. Вся фишка в том, что в случае с горизонтальным меню это никак не повлияет на отображение навигации – подпункты по-прежнему будут располагаться под главным пунктом при наведении на него.

      Зато после этих изменений вы сможете добавить меню для каждого подпункта. Опять же, необязательно оно должно отображаться сбоку, это всего лишь моя идея, вы можете отображать его под подпунктом при наведении на него. Тогда вообще никакого позиционирования не понадобится!

      В общем, итог таков:

      При наведении на пункт 4 появляется первое выпадающее меню, при наведении на первый подпункт появляется отдельное меню для него, которое расположено сбоку. У других подпунктов такое меню не отображается, так как мы не создавали его в html-разметке.

      Я думаю, вам понятно общая концепция. Если вы смогли разобраться, то уже самостоятельно сможете создать нужное вам выпадающее меню и самостоятельно решить проблемы, если это возможно в рамках css.

      Итог

      В общем, вам главное понять, как правильно позиционировать вложенное меню, а также как непосредственно реализовывается выпадение. Надеюсь, из этой статьи вы это поняли и теперь самостоятельно на чистом css сможете делать такую навигацию. Мы с вами узнали, как сделать выпадающее меню.

      Много других очень интересных возможностей css вы можете узнать в нашем премиум-курсе по новым фишкам css3. Там вы научитесь делать градиенты, работать с новыми селекторами, создавать тени и т.д. Если вам нравится css, то точно понравится эта серия уроков. Ну а я на этом прощаюсь с вами.

      Практический курс по верстке адаптивного сайта с нуля!

      Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

      Узнать подробнее

      Источник: https://webformyself.com/kak-sozdat-v-css-vypadayushhee-menyu/

      Создаем выпадающее меню на чистом CSS

      В сегодняшней статье я хотел бы рассказать, как создать на CSS2.1 и HTML выпадающее меню. Также я покажу один небольшой трюк, при помощи которого можно будет добавлять иконку «+» к элементам навигации в том случае, если в них скрыто выпадающее меню. Для этого мы воспользуемся псевдоэлементом :only-child.

      Исходный код
      Демо

      Для начала мы создадим базовую структуру навигационного меню, состоящего из шести пунктов:

      • Home
      • WordPress
      • Graphic Design
      • Inspiration
      • Contact
      • About

      Далее нам нужно добавить базовые CSS-стили для HTML горизонтального меню. Я оставил комментарии к каждому блоку кода:

      /* задаем цвет фона для контейнера nav. */ nav { margin: 100px 0; background-color: #E64A19; } /* убираем отступы и поля, а также list-style для «ul», * и добавляем «position:relative» */ nav ul { padding:0; margin:0; list-style: none; position: relative; } /* применяем inline-block позиционирование к элементам навигации */ nav ul li { margin: 0px -7px 0 0; display:inline-block; background-color: #E64A19; } /* стилизуем ссылки */ nav a { display:block; padding:0 10px; color:#FFF; font-size:20px; line-height: 60px; text-decoration:none; } /* изменяем цвет фона при наведении курсора */ nav a:hover { background-color: #000000; }

      После применения стилей у нас должно получиться нечто вроде этого:

      Чтобы добавить выпадающий список к какому-либо из элементов HTML меню, нам нужно добавить

        внутрь элемента

      • для пункта, в котором нужно скрыть выпадающий список:
        • Home
        • WordPress
          • Themes
          • Plugins
          • Tutorials
        • Graphic Design
        • Inspiration
        • Contact
        • About

        Мы добавили новый неупорядоченный список с тремя пунктами списка внутрь второго элемента

      • , который отвечает за пункт меню WordPress. Обратите внимание на то, что мы добавили
          после анкорного тега ().Теперь добавим CSS-стили, чтобы выпадающий список был скрыт по умолчанию, и появлялся, когда посетитель наводит курсор мыши на соответствующий родительский элемент HTML меню для сайта. После приведенного выше CSS-кода добавьте следующий фрагмент:/* скрываем выпадающие списки по умолчанию * и задаем абсолютное позиционирование */ nav ul ul { display: none; position: absolute; top: 100%; } /* отображаем выпадающий список при наведении */ nav ul li:hover > ul { display:inherit; } /* первый уровень выпадающего списка */ nav ul ul li { min-width:170px; float:none; display:list-item; position: relative; }Если до этого момента вы все делали правильно, то при наведении курсора на пункт меню «WordPress» должны увидеть выпадающий список с тремя другими пунктами («Themes», «Plugins», «Tutorials»):Чтобы добавить выпадающие списки, состоящие из нескольких уровней, этот процесс нужно повторить. Определяем пункт меню, из которого нужно сделать выпадающий список, и добавляем новый

            между тегами .Взгляните на приведенный ниже HTML-код, в котором мы добавляем второй уровень выпадающего списка к пункту меню «Tutorial», который находится внутри пункта «WordPress»:

            • Home
            • WordPress
              • Themes
              • Plugins
              • Tutorials
                • Stuff
                • Things
                • Other Stuff
            • Graphic Design
            • Inspiration
            • Contact
            • About

            Чтобы вертикальное меню HTML отображалось корректно, нужно добавить еще пару строк CSS кода:

            /* второй, третий и последующие уровни * смещаем 2 и 3 уровни влево * на значение длины первого уровня. */ nav ul ul ul { position: absolute; top:0; left:100%; }

            Если все сделано правильно, у вас должно получиться нечто вроде этого:

            Этот процесс можно повторять, и добавлять новые уровни. Но не следует добавлять их к последнему элементу выпадающего списка, так как я сделал это лишь для примера.

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

            Перед тем, как сделать выпадающее меню в HTML до конца, разберемся с индикатором, который указывает на наличие выпадающего списка, прикрепленного к тому или иному пункту меню (знак «+»):

            /* измените ' +' на любой другой символ, если нужно */ li > a:after { content: ' +'; } li > a:only-child:after { content: ''; }

            Для этого мы используем псевдоэлемент CSS3 (:only-child). В данном случае он проверяет, имеются ли в тегах

          • родительского элемента другие элементы. Если нет, то знак плюса просто убирается, так как по умолчанию он присутствует рядом со всеми пунктами. Видите + возле пунктов WordPress и Tutorials?

            Значит, вы все сделали правильно.

            В завершение

            Многие для достижения подобного эффекта используют jQuery или другие библиотеки. Я считаю, что в этой статье приведен самый простой и легкий вариант. Но выбор за вами.

            А как вы сделали меню на HTML? Пожалуйста, расскажите об этом в комментариях.

            Перевод статьи “How to Create a Pure CSS Dropdown Menu” был подготовлен дружной командой проекта Сайтостроение от А до Я.

          • Источник: https://www.internet-technologies.ru/articles/sozdaem-vypadayuschee-menyu-na-chistom-css.html

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

            Выпадающее меню можно сделать на CSS не используя скрипты и модули. Просто дописываем несколько строк в CSS файл и готово. Несмотря на простоту меню будет достаточно универсальным.

            Стили подходить под произвольное количество уровней вложенности. Хоть два хоть десять уровней. Код при этом остаётся тем же.

            Обратите внимание

            В статье описаны три вида меню, но если вы только начинаете разбираться в вёрстке советую читать сначала. Так будет проще понять.

            Сначала сделаем HTML разметку для меню. Принято делать меню списком. Это не стандарт просто так сложилось. 

            1. пункт 1
            2. пункт 1.1
            3. пункт 1.2
            4. пункт 2
            5. пункт 2.1 многа букаф
            6. пункт 2.2
            7. пункт 2.2.1
            8. пункт 2.2.2
            9. пункт 3
            10. пункт 4
            11. пункт 5

            HTML файл мы больше трогать не будем. Все дальнейшие изменения производятся только за счёт CSS. Первое что нам нужно сделать — скрыть вложенные пункты.

            ul.nav li ul {display: none;}

            Ещё нужно убрать маркеры но это дело вкуса.

            ul.nav li {list-style: none;}

            Чтобы вложенные пункты появлялись при наведении на родительский пункт используем псевдокласс :hover, при этом нужно сделать так что бы появлялись только пункты первого уровня вложенности. Для этого используем знак >

            ul.nav li:hover > ul {display: block;}

            В этой строчке заключается вся магия нашего выпадающего меню, поэтому разберём её подробнее.

            Благодаря псевдоклассу :hover, при наведении курсора на пункт меню, он же элемент списка li, для первого вложенного списка ul значение display станет block. Так открывается первый уровень вложенности.

            Если на этом уровне есть пункты содержащие подпункты, то при наведении на них также откроется только один вложенный уровень.

            С основной механикой разобрались. Осталось переопределить место где будут появляться вложенные пункты. Для этого воспользуемся свойством position: absolute.

            При таком позиционировании отсчёт координат ведётся от края окна браузера если только для родительского элемента не задано свойство position с значением fixed, relative или absolute.

            Важно

            В этом случае отсчёт ведётся от края родительского элемента.

            Используя свойство position мы переместим вложенные пункты в право на расстояние равное ширине меню. В рассматриваемом способе есть одно ограничение. При позиционировании нам придётся жёстко задать ширину. С другой стороны вертикальное меню размещается в сайдбаре ширина которого заранее определена, поэтому привязка к ширине не должна вызвать проблем.

            1. /* Вертикальное выпадающее меню*/
            2. body{
            3. background: #DCDCDC;
            4. }
            5. /*блок меню*/
            6. ul{
            7. margin: 0;
            8. padding: 0;
            9. }
            10. ul.nav li {
            11. background: #B3B3FF;
            12. border: 1px solid #FFFFFF;
            13. list-style: none;
            14. width: 150px; /*ширина блока меню*/
            15. }
            16. ul.

              nav li a {

            17. text-decoration: none;
            18. display: block;
            19. padding: 5px 5px 5px 15px;
            20. }
            21. ul.nav li ul {
            22. display: none; /*скрываем вложенные пункты*/
            23. }
            24. /*Выпадающее меню*/
            25. ul.

              nav li:hover {

            26. /* позиционирование вложенных элементов
            27.   * будет расчитыватьться относительно
            28.   * родительского элемента
            29.   */
            30. position: relative;
            31. background: yellow;
            32. }
            33. ul.nav li:hover > ul {
            34. display: block;
            35. }
            36. ul.

              nav li:hover ul{

            37. position: absolute;
            38. top: 0; /*Задаём координаты для вложенных пунктов*/
            39. left: 150px; /*меню раскрывается вправо*/
            40. }

            Вот что должно получиться в результате. демка

            Для горизонтального меню мы будем так же применять позиционирование но есть несколько нюансов. Что бы сделать меню горизонтальным используем свойство float.

            Меню будет раскрываться вниз значит при позиционировании нужно учитывать высоту. Для начала сделаем меню с одним уровнем вложенности. Вложенное меню также будет горизонтальным.

            Для этого вложенное меню позиционируем относительно списка а не родительского пункта и задаём для него ширину.

            1. /*Горизонтальное выпадающее меню с одним уровнем вложенности*/
            2. body{
            3. background: #DCDCDC;
            4. }
            5. /* Блок меню*/
            6. ul{
            7. margin: 0;
            8. padding: 0;
            9. }
            10. ul.

              nav li {

            11. background: #B3B3FF;
            12. border-right: 1px solid #FFFFFF;
            13. float: left; /*делаем меню горизонтальным*/
            14. height: 30px;
            15. list-style: none;
            16. }
            17. ul.nav li a {
            18. text-decoration: none;
            19. display: block;
            20. padding: 5px 5px 5px 15px;
            21. }
            22. ul.

              nav li ul {

            23. display: none; /*скрываем вложенные пункты*/
            24. }
            25. ul.nav li:hover {
            26. background: yellow;
            27. }
            28. /*Выпадающее меню*/
            29. ul.nav {
            30. position: relative;
            31. background: #B3B3FF;
            32. height: 30px;
            33. width: 600px;
            34. }
            35. ul.

              nav li:hover > ul {

            36. background: #D0E0FF;
            37. border-top: 1px solid white;
            38. display: block;
            39. width: 600px;
            40. position: absolute;
            41. top: 30px;
            42. left: 0;
            43. }

            Вот что получиться в итоге демка.

            Созданное в предыдущем пункте меню также может быть многоуровневым но выглядит оно при этом не очень. На мой взгляд многоуровневое меню должно открываться следующим образом — первый уровень вниз остальные вправо.

            Здесь, в отличии от предыдущего горизонтального меню, вложенные пункты позиционируем относительно родительского пункта и задаём для них ширину. Ширина нам нужна для второго и последующих уровней вложенности.

            В этом меню мы возьмём понемногу от предыдущих и немного добавим нового.

            1. /*Горизонтальное выпадающее меню a*/
            2. body{
            3. background: #DCDCDC;
            4. }
            5. /* Блок меню*/
            6. ul{
            7. margin: 0;
            8. padding: 0;
            9. }
            10. ul.

              nav li {

            11. background: #B3B3FF;
            12. border-right: 1px solid #FFFFFF;
            13. float: left; /*делаем меню горизонтальным*/
            14. height: 30px;
            15. list-style: none;
            16. }
            17. ul.nav li a {
            18. text-decoration: none;
            19. display: block;
            20. padding: 5px 5px 5px 15px;
            21. }
            22. ul.

              nav li ul {

            23. display: none; /*скрываем вложенные пункты*/
            24. }
            25. ul.nav { /*задаём высоту и ширину меню*/
            26. background: #B3B3FF;
            27. height: 30px;
            28. width: 600px;
            29. }
            30. /*Выпадающее меню*/
            31. ul.nav li:hover {
            32. background: yellow;
            33. position: relative;
            34. }
            35. ul.

              nav li:hover > ul {

            36. border-top: 1px solid white;
            37. display: block;
            38. position: absolute;
            39. top: 30px; /*первый уровень меню раскрывается вниз*/
            40. left: 0;
            41. }
            42. /*Второй и последующие уровни вложенности*/
            43. ul.

              nav li ul li{

            44. border-bottom: 1px solid white;
            45. height: auto;
            46. width: 150px;
            47. }
            48. ul.nav li:hover ul li ul{
            49. position: absolute;
            50. top: 0;
            51. left: 150px; /*второй и последующие уровни расскрываются вправо*/
            52. }

            Вот так будет выглядеть наше многоуровневое меню демка.

            Источник: https://webonlife.ru/sozdanie-sayta/vypadayushchee-menyu-na-html-i-css

            Выпадающий список HTML — Интернет работа

            . CSS-код:

            body {
                /* Убираю отступы. */
                margin:0px;
                /* Убираю еще отступы. */
                padding:0px;
                /* Задаю шрифт. */
                font: 14px 'Verdana';
            }
            ul {
                /* Убираю маркеры у списка*/
                list-style: none;
                /* Делаю элементы блочными. */
                display: block;
                /* Убираю отступы.

            */
                margin:0px;
                /* Убираю еще отступы! */
                padding:0px;
            }
            ul:after {
                /* Делаю элементы блочными. */
                display: block;
                /* Убираю выравнивание. */
                float: none;
                content: ' ';
                clear: both;
            }
            ul.mmenuu > li {
                /* Задаю выравнивание и позиционирование.

            */
                float: left;
                /* Считаем координаты относительно исходного места*/
                position: relative;
            }
            ul.mmenuu > li > a {
                /* Делаю элементы блочными: */
                display: block;
                /* Задаю белый цвет. */
                color: #fff;
                /* Задаю отступ 10px.

            */
                padding: 10px;
                /* Убираю форматирование*/
                text-decoration: none;
                /* Задаю цвет. */
                background-color: #da570f;
            }
            ul.mmenuu > li > a:hover {
                /* Задаю цвет при наведении. */
                background-color: #eb9316;
            }
            ul.

            ssubmenuu {
                position: absolute;
                width: 240px;
                top: 37px;
                left:0px;
                /* Делаю субменю скрытыми. */
                display: none;
                /* Цвет — белый. */
                background-color: white;
            }
            ul.ssubmenuu > li {
                /* Блочное расположение элементов*/
                display: block;
            }
            ul.

            ssubmenuu > li > a {
                /* Делаю элементы блочными. */
                display: block;
                /* Убираю форматирование*/
                text-decoration: none;
                /* Задаю отступ. */
                padding: 10px;
                /* Задаю цвет. */
                color: #ffffff;
                /* Еще цвет. */
                background-color: #da570f;
            }
            ul.

            ssubmenuu > li > a:hover {
                /* Цвет бэкграунда при наведении. */
                background-color: #eb9316;
                /* Задаю подчеркивание*/
                text-decoration: underline;
            }
            ul.mmenuu > li:hover > ul.ssubmenuu {
                /* Делаю элементы блочными. */
                display: block;
            }

            Результат:

            Ого! В жизни не видел ничего прекраснее этого минималистичного выпадающего списка. Без JavaScript и обращения к фрилансерам!

            И снова мы изобретаем меню на чистом CSS, без использования JS.

            Раздел меню №1
            Раздел меню №2
               
                    Подраздел №1 второго меню
                    Подраздел №2 второго меню
               

            Раздел меню №3
               
                    Подраздел №1 третьего меню
                    Подраздел №2 третьего меню
                    Подраздел №3 третьего меню
               
                 

            Учитывая то, что вы видели в предыдущей части статьи, думаю выглядит многообещающе. А все благодаря чему? Потому что мы умеем присваивать нужным элементам стиль «display:none» и прописывать в CSS чтобы при наведении на него приоритетным было что-то типа «inline-block» взамен «none».

            Давайте немного подробнее остановимся на вышеприведенном коде. В нем я присвоил «id=»menu»» основному списку, то есть всему выпадающему меню. Я сделал это для того чтобы обозначить сразу родительские элементы выпадающего списка и сделать их видимыми.

            Дальше. В каждый из разделов я вложил дополнительные списки

              , которые содержат в себе выпадающие ссылки (см. также как вставить ссылку в HTML). Они будут появляться при наведении.Перейдем к CSS. Код:    /* Обнуляю отступы и убираю маркеры у списков. */    ul, li {        margin:0;        padding:0;        list-style-type:none;      }    /* Задаю параметры для основного, родительского блока, меню выпадающего списка. */    #menu {        display:block;        position:absolute;        top:20px;        left:20px;    }    /* Задаю стили для блоков выпадающего списка. */    #menu > li {        display:inline-block;        height:20px;    /* Считаем координаты относительно исходного места. */        position:relative;    }    /* Задаю стили, чтобы скрыть дочерние блоки выпадающего списка. Ну и немного украшаю. */    #menu > li > ul {        position:absolute;        top:20px;        left: 10px;        display:none;        background-color: bisque;        border-radius: 5px;        width: 185px;        font-size: 14px;        padding: 10 0 10 10;    }    /* Так я делаю прежде скрытую часть видимой — при наведении курсора. */    #menu > li:hover > ul {        display:block;      }Результат:Что хочу отметить дополнительно.«#menu > li» означает, что стили будут применены только к дочерним элементам по отношению к тегу «ul#menu», а не ко всем как могли подумать некоторые. Внимательнее!«Position: relative;» — отсчитывает координаты от угла одного из разделов в главном списке, откуда выпадают дочерние элементы.А значит для пользователей посещающих сайт с мобильных устройств вам понадобится отдельная реализация меню с выпадающим списком. Вот пожалуй и все в этой части статьи.

              Как создать крутое выпадающее меню

              Третье готовое, простое и функциональное решение для создания красивого горизонтального меню с выпадающим списком разнообразных элементов.Концепция, как и прежде, до глубины души простая. Мы делаем горизонтальную иерархию разделов, используя ненумерованный список без маркеров, и затем оборачиваем в красивые стили.Стили помогают нам скрыть элементы и сделать их выпадающими при наведении курсора.Код:            Главная                О нас                    Суперпродукты            Суперкоманда                        Услуги                    Крутая услуга №1            Крутая услуга №2            Крутая услуга №3                        Продукты                    Суперсылка №1            Суперсылка №2            Суперсылка №3            Суперсылка №4                        Контакт                    Время работы            Месторасположение            Выпадающий список 10/10!            Хотел немного его прокомментировать, да передумал еще раз взглянув на код — он чистый, ясный, красивый. Вроде все должно быть понятно.Теперь давайте вооружимся магией стилей — при помощи CSS я трансформирую все серии вложенных списков

                в крутое и удобное в использовании выпадающее меню с несколькими элементами.Перейдем к CSS-коду. Что-то мне стало скучно туда-сюда бегать, поэтому я хорошенько его прокомментировал прямо в стилях. Да и вам удобнее будет, если будете пользоваться этим решением.CSS-код, помещенный в страницы:#nnavv{    /* По левому краю выравниваю! */    float:left;    /* Отступ. */    margin-bottom: 10;    /* Задаю ширину. */    width:500px;    /* Убираю маркеры*/    list-style: none;    /* Шрифт — жирным*/    font-weight: bold;}#nnavv li{    /* Выравнивание! */    float: left;    /* Делаю элементы блочными. */    display: block;    /* Отступ. */    margin-right: 10;    /* Позиционирование относительно исходного места! */    position: relative;}#nnavv li a{    /* Цвет бэкграунда. */    background: #333;    /* Делаю элементы блочными. */    display: block;    /* Отступы. */    padding: 5;    /* Цвет ссылки. */    color: #fff;    /* Форматирование текста*/    text-decoration:none;    /* Задаю скругленные углы на 2 пиксела*/    -moz-border-radius: 2;    -webkit-border-radius: 2;    border-radius: 2;    /* Тень для визуальной приподнятости текста*/    text-shadow:1px 1px 1px rgba(0,0,0,0.74);}#nnavv li a:hover{    /* Подчеркну ссылку при наведении*/    text-decoration: underline;    /* Задам фон. */    background: #6b0c33;    /* Цвет ссылки остается прежним*/    color: #fff;    background: rgba(108,13,53,0.74); /* Заставляю выглядеть полупрозрачным! */}/* НАСТРАИВАЕМ ВЫПАДАЮЩИЕ ЭЛЕМЕНТЫ!!! */#nnavv ul{    /* Убираю маркеры у выпадающего списка*/    list-style:none;    left:-9999px; /* Убираю ненужно за пределы экрана (говорят, это на 95% лучше чем «display:none;», т.к. дисплей нон некоторые программы игнорируют). */    opacity:0; /* При помощи прозрачности, скрываем

                  . */    /* Делаем так, чтобы Webkit плавно показывал нам всплывающие элементы выпадающего списка при наведении мышки. */    -webkit-transition: 0.24s linear opacity;    position:absolute;}#nnavv ul li{    /* Здесь я задаю отступ между элементами <li>. Это необходимо для разделения пунктов меню, его не было в предыдущей части статьи (просто забыл)*/    padding-top: 1px;    float:none;}#nnavv ul a{    /* Делаю элементы блочными. */    display:block;    /* Запрещаю перенос строк текста на новую строку, чтобы создавался многострочный выпадающий элемент списка. */    white-space: nowrap;}#nnavv li:hover ul{ /* Создаю выпадающий пункт, который появится при наведении. */    left:0; /* Возвращаю его обратно на экран пользователя, — когда нужно. */    opacity:1; /* Убираю прозрачность*/}#nnavv li:hover a{ /* В этом стиле я устанавливаю свойства для элементов верхнего уровня, — в то время, когда показывается выпадающий список. */    /* Подчеркну*/    text-decoration:underline;    /* Сделаю полупрозрачным. */    background:rgba(109,15,53,0.74);    background:#6b0c36;}#nnavv li:hover ul a{ /* Поменял некоторые стили первого уровня при появлении выпадающего элемента. */    /* Уберу форматирование*/    text-decoration:none;    -webkit-transition:-webkit-transform 0.077s linear;}#nnavv li:hover ul li a:hover{ /* Здесь я задаю стили для конкретных выпадающих пунктов, при наведении на них курсора — чтобы они отличались от тех элементов, куда курсор не попадает*/    -moz-transform:scale(1.07);    -webkit-transform:scale(1.07);    /* Задам цвет фона выпадающего элемента*/    background:#334;    background:rgba(50,50,50,0.74); /* Сделаю полупрозрачным. */    text-decoration:underline;}Готово! Финальный результат:

                  Бонус — суперкрутой выпадающий список на хтмл и цсс

                  Четвертый и последний на сегодня. Я устал, вы устали — думаю четыре выпадающих меню будет достаточно для того, чтобы выбрать наиболее оптимальный вариант для себя.Тоже делаем список со ссылками, отображающимися при наведении. Никаких анимаций, модных выездов, мигания — только чистый кроссбраузерный код, простой и эффективный. Вместо «display:none;» использую «left: -9999px;». Ну там сами увидите.HTML код:        Красноярский край                    Минусинск            Ачинск            Красноярск            Железногорск            Канск            Норильск                Свердловская область                    Екатеринбург            Верхняя Пышма            Нижний Тагил            Первоуральск            Асбест            Каменск-Уральский            Скриншот результата:CSS-код, который я поместил в :ul.ddropdownn li {/* Считаем координаты относительно исходного места. */ position: relative; }ul.ddropdownn, ul.ddropdownn-inside {    /* Отступы на нуле. */    padding: 0;    /* Маркеры уберем. */    list-style-type: none;    }ul.ddropdownn-inside {    /* Спрячем дочерние элементы выпадающего списка. */    left: -9999px;    position: absolute;    }ul.ddropdownn li.ddropdownn-top {    /* Небольшой отступ. */    margin: 0 1px 0 0;    /* Выравнивание по левой стороне. */    float: left;    display: inline;    }ul.ddropdownn li.ddropdownn-top a {    /* Делаю элементы блочными. */    display: block;    /* Снова отступы. */    padding: 3px 10px 4px;    }ul.ddropdownn a.ddropdownn-top {/* Цвет фона. */ background: #efefef; }ul.ddropdownn a.ddropdownn-top:hover {/* Отступы. */ padding: 3px 10px 4px; }ul.ddropdownn li.ddropdownn-top:hover .ddropdownn-inside {    left: 0;    /* Делаю элементы блочными. */    display: block;    }ul.ddropdownn .ddropdownn-inside {/* Цвет фона. */ background: #ffffff; }ul.ddropdownn .ddropdownn-inside a:hover {/* Цвет фона изменится при наведении. */ background: #efefef; }Результат (без наведения курсора):Результат (при наведении курсора):

                  Итоги: скачать готовый html+css код выпадающего списка меню

                  Как вы могли убедиться на вышеприведенных примерах, выпадающий список без особых проблем делается на обычном HTML.Надеюсь один из списков украсит меню вашего проекта или хотя бы будет использован в качестве основы.Я подготовил для вас архив, который вы можете скачать. Там все 4 выпадающих списка — html код и css стили прямо в файле. Там думаю разберетесь.Превью содержимого файла:Скачать:P.S. Ну а если вы вдруг неправильно написали поисковый запрос и зашли не туда (не нашли то чего нужно), не расстраивайтесь — у меня есть пара видео, где при помощи и в HTML страницу вставляются выпадающие списки. Видео 1:Видео 2:

                Источник: https://blogwork.ru/vypadayushhij-spisok-html/

                Как сделать плавное выпадающее меню на CSS

                Приветствую! Если ты начинающий верстальщик, то рано или поздно ты столкнешься с тем, что захочешь как-то оживить свои страницы, сделать их хоть немного интерактивными. Как нельзя лучше тут тебя смогут выручить CSS анимации. Но нужно знать, где и как их применять.

                Сегодня я расскажу, как сделать выпадающее меню на чистом CSS и как добавить ему плавности с помощью CSS анимации. Если ты не знаешь, что такое CSS анимация, то самое время ознакомиться с азами.

                Верстаем меню HTML + CSS

                Для начала, чтобы нам было с чем работать, давайте сверстаем простое одноуровневое меню. Не будем сильно заморачиваться с дизайном, для наглядности хватит и этого:

                Что мы имеем? Самый обыкновенные ненумерованный список с идентификатором «top_menu» и со ссылками, обернутыми в элементы этого самого списка. Все банально и просто. При наведении пункты меню меняют цвет… это все вы уже знаете и понимаете, как это сделать (я надеюсь).

                Добавляем меню второго уровня

                Чтобы сделать многоуровневое меню, нам нужно добавить второй ненумерованный список внутрь первого. Думаю, это вы проходили где-то на начальных уроках. А также то, что его вставить нужно не просто внутри нашего списка, а именно внутри элемента списка, то есть тега «li», сразу после закрывающего тега «a».

                Позиционируем вложенные списки абсолютно по отношению к «li», в которые они вложены. А все «li» верхнего уровня позиционируем относительно (relative). Чтобы выпадающее меню находилось СРАЗУ же после нашего меню верхнего уровня, ему (выпадающему – “inner_menu”) нужно задать

                position: absolute; top: 100%;

                То есть отступ от верхней границы родителя будет равен высоте родителя. Очень логично, по-моему.

                Совет

                Помимо позиционирования нужно придать выпадающему меню стиль как у меню верхнего уровня. Яблочко от яблоньки, как говорится…

                Как видите, наше выпадающее меню пока выглядит не выпадающим, а выпавшим и висящим. Но ничего, это мы скоро исправим.

                Как сделать выпадающее меню действительно выпадающим

                Нет ничего проще! Чтобы наш вложенный список сделать выпадающим меню, его нужно просто скрыть! А потом открывать только тогда, когда курсор мыши будет проноситься над пунктом меню верхнего уровня, который содержит в себе выпадающее меню. Звучит, может быть, немного сложно, но на самом деле это решается буквально несколькими строчками кода.

                Выпадающему меню добавляем:

                display: none;

                А чтобы его отобразить, нужно прописать:

                #top_menu > li:hover > ul {   display: block; }

                Что нам говорит это целое скопище селекторов? Читаем с конца. Мы задаем стили (видмости) для списка второго уровня, который лежит внутри элемента списка первого уровня, но стили эти сработают только в том случае, если мы наведем мышкой (ховер) на элемент «li» в который вложен наш список второго уровня.

                Надеюсь, я выразился понятно. Если нет, попробуйте прочитать несколько раз. А еще лучше просто понимать это, глядя на код. Смотрим, что у нас получилось:

                Да, мы вроде бы добились того, чего хотели – мы сделали выпадающее меню, самое настоящее выпадающее меню, мать его! Но ему чего-то не хватает. А знаете чего? Плавности! Ведь все выглядит так, как будто меню не выпадает, а просто появляется. Причем очень резко, моментально даже, я бы сказал.

                Ну что же, давайте еще немного поколдуем над ним.

                Плавное выпадающее меню – это просто

                Итак, давайте сделаем плавное выпадающее меню на чистом CSS. Зачем это делать? Потому что люди любят, когда все плавненько и мягонько… и это выглядит красиво. Будет плюс к юзабилити вашего сайта. Погнали!

                Запомните, вы можете анимировать только точные математические величины, например 50px и 300px, 0 и 100%, 0,5 и 1,0 и так далее. В нашем случае мы не сможем анимировать два состояния нашего выпадающего меню (display:none; и display:block;).

                Но мы можем заменить их на прозрачность – opacity:0 и opacity:1. И задать время в течение которого наше меню будет проявляться из прозрачного состояния. Да, это действительно сработает, однако это не совсем тот эффект, который вы возможно ожидали. Поэтому давайте сделаем немного сложнее. Но это того стоит, поверьте.

                Обратите внимание

                Чтобы анимация получилась более плавной и предсказуемой, пришлось задать фиксированную высоту пунктам выпадающего меню, хотя можно было обойтись и без этого. Методов уйма, только придумывай комбинации и решай задачи.

                Как видно из кода, мы анимировали высоту элементов выпадающего списка и их прозрачность. Этого оказалось достаточно для того, чтобы сделать красивую плавную анимацию выпадающего меню.

                Что нам понадобилось для анимации? Два состояния пунктов нашего меню, а также свойство transition, которое проинтерполировало эти состояния, то есть заполнило все промежуточные значения за отведенный промежуток времени. Вот и все!

                Еще проще можно было бы сделать с применением jQuery, но мы же оговорили сначала, что будем сегодня работать с чистым CSS. А еще красивее можно было сделать, добавив к анимациям кривые Безье, однако эта тема немного выходит за рамки сегодняшней. Но мы к ней обязательно вернемся позже.

                Вывод:

                Теперь вы можете похвастаться своим друзьям и близким, что знаете, как сделать выпадающее меню на чистом CSS. Это действительно полезный навык, который вам еще не раз пригодится. Ну, сами посудите, много ли вы видели сайтов со статичным меню? Нет, большинство сайтов имеют именно выпадающее меню.

                Кстати это был мой первый урок по CSS. Опишите, как вам? Понятно все объяснил или нужно еще подробнее разжевывать? И стоит ли вообще продолжать писать статьи на тему лайфхаков в CSS?

                Спасибо за внимание и до скорых встреч!

                Источник: http://digital-boom.ru/coding/css-haki/vypadayushhee-menyu-css.html

  • Ссылка на основную публикацию