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

Сегодня мы будем рассматривать вопрос «Как создать выпадающее меню CSS?». Стоит сразу сказать, что этот элемент будет сделан без подключения каких-либо дополнительных средств. То есть, меню будет создано только при помощи CSS и HTML.

Подготовка

Чтобы полностью понять, о чем идет в речь в статье, необходимо хоть немного познакомиться с теоретическим материалом. Но если вы знакомы с псевдоклассами, то можете пропустить этот абзац. Итак, чтобы создать вертикальное выпадающее меню CSS, нам понадобится такой элемент, как «:hover». Псевдокласс «:hover» может назначаться к любому тегу HTML. Он позволяет определить момент, когда на какой-либо элемент наведен курсор мыши. Например, мы назначили свойство: «a:hover {color: red-}». Данная запись означает, что при наведении курсора мыши на любой тег его содержимое становится красным. Стоит заметить, что этот псевдокласс означает еще неактивированный элемент. Кстати, «:hover» имеет родственные подобные элементы. Но именно с помощью этого псевдокласса мы будем создавать выпадающее меню CSS.

• Создаем макет нашего меню. Для этого сделаем разметку HTML-кода. Создадим вложенный список: . Примерно так должно выглядеть ваше выпадающее меню. CSS вступит в дело чуть позже. В данном случае основной список состоит из трех основных пунктов и двух вложенных.
• Скрываем дополнительное меню. Для этого используем таблицы стилей, определим следующее свойство: ul ul {display: none;} Это уберет элементы второго списка с экрана.
• Создаем в CSS меню, выпадающее из основного списка. В каскадных таблицах стилей напишем следующее правило: ul li:hover ul {display: block-}. Данная запись означает, что при наведении курсора мыши на элемент li, который находится в списке ul, на экране появиться ul (вложенный). На первый взгляд такая схема может показаться слишком сложной и запутанной. Но на самом деле все очень просто.
• Используйте данный макет самостоятельно, вставляя между тегами
• свой контент. Можете изменять количество элементов списка.

Декоративные изменения

Как только будет готов основной макет меню, можно приступать к его оформлению. Наверное, многие в первую очередь желают избавиться от маркеров, обозначающих элемент списка. Делается это при помощи одного свойства CSS, а именно list-style-type. Вам нужно добавить такую запись: li {list-style-type: none;}. Далее можно вставить рамку и сделать задний фон. Свойства border и background вам в этом помогут. Возможно, некоторым не понравится, что выпадающее меню появляется как дополнительный список, раздвигая при этом основный элементы. Чтобы это исправить, можно позиционировать его. Для этого в каскадных таблицах стиля пишем следующую запись: ul ul {position: absolute- left: 15px; right: 15px; top: 15px; bottom: 15px;}. Естественно, значения у вас будут использоваться свои. В зависимости от того, где вы хотите увидеть выпадающее меню, CSS предложит еще множество свойств, которые могут добавить различные эффекты и украсить наши списки.

Заключение

Еще раз стоит отметить конструкцию макета меню. Для присвоения CSS правил в данном случае используются вложенные значения, например, ul ul. Если у вас в документе будут встречаться другие подобные конструкции, то могут возникнуть большие проблемы. В этих ситуациях нужно использовать более конкретное назначение, например, селекторы или id-идентификаторы. Приведенный в статье макет выпадающего меню предназначен для ознакомления с общей конструкцией. Остальная работа возлагается на ваши плечи.