38 бесплатных CSS наработок выпадающих меню


Содержание

CSS меню

Мини меню с выпадающим списком.

Тёмное горизонтальное меню с разноцветными hover и active эффектами у кнопок.

Элегантное меню с вкладками и выпадающим списком скачать бесплатно.

Простое вертикальное меню с иконками, счётчиками и подменю.

Блестящее, горизонтальное меню со светлыми кнопками в трёх состояниях.

Светлое, горизонтальное меню навигации. 3 состояния кнопок.

Светлое, боковое меню с тремя состояниями кнопок.

Простое решение навигации с красочными значками уведомлений.

CSS transitions и CSS анимация. Разворот меню на весь экран.

Горизонтальное меню на CSS3. Работает в Firefox 4, Safari 5, Chrome 13, Opera 10, IE 9.

Выезжающая панель с вертикальным меню в стиле Google Nexus Page от Codrops.

CSS меню

Если ваш веб-сайт не ограничивается одной веб-страницей, то стоит подумать о добавлении панели навигации (меню). Меню — раздел веб-сайта, предназначенный помогать посетителю перемещаться по сайту. Любое меню представляет собой список ссылок, ведущих на внутренние страницы сайта. Самым простым способом добавить панель навигации на сайт является создание меню с помощью CSS и HTML.

Вертикальное меню

Первым шагом создания вертикального меню будет создание маркированного списка. Также нам нужно будет иметь возможность идентифицировать список, поэтому мы добавим к нему атрибут id с идентификатором «navbar». Каждый элемент нашего списка будет содержать по одной ссылке:

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

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

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

Мы объединили весь код, описанный выше, в один пример, теперь, нажав на кнопку попробовать, вы можете перейти на страницу с примером и увидеть результат:

При наведении курсора мыши на пункт меню его внешний вид может изменяться, привлекая к себе внимание пользователя. Создать такой эффект можно с помощью псевдо-класса :hover.

Вернемся к рассмотренному ранее примеру вертикального меню и добавим в таблицу стилей следующее правило:

Горизонтальное меню

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

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

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

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

Теперь нам осталось лишь определить стилевое оформление для нашего горизонтального меню:

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

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

Сначала нам нужно создать HTML-структуру нашего меню. Основные навигационные ссылки мы поместим в маркированный список:

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

Теперь приступим к написанию CSS кода. Для начала необходимо скрыть список с подпунктами с помощью объявления display: none;, чтобы они не отображались на веб-странице все время. Для отображения подпунктов нам нужно чтобы при наведении на элемент
список снова был преобразован в блочный элемент:


Убираем у обоих списков отступы и маркеры, установленные по умолчанию. Элементы списка с навигационными ссылками делаем плавающими, формируя горизонтальное меню, но для элементов списка, содержащих подпункты задаем float: none;, чтобы они отображались друг под другом.

Затем нам нужно сделать так, чтобы наше выпадающее подменю не смещало контент, расположенный под панелью навигации, вниз. Для этого мы зададим пунктам списка position: relative;, а списку, содержащему подпункты position: absolute; и добавим свойство top со значением 100%, чтобы абсолютно позиционированное подменю отображалось точно под ссылкой.

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

Теперь нам осталось стилизовать оба наших списка и выпадающее меню будет готово:

Адаптивное меню на чистом CSS

Последнее изменение поста: 6 июня 2020 в 17:36

В данном уроке я расскажу о том как на чистом CSS (без использования JS) сверстать горизонтальное адаптивное (складывающегося) — которое можно установить на любой сайт. Это сейчас очень актуально — так как пришла эра быстрых сайтов, скоро походу фрейверки типа бутстрапа будут не в моде — для тех кто хочет хороших позиций в гугле.

Цукерберг рекомендует:  «Год без забот» сначала диплом, потом оплата

HTML разметка меню

Здесь все при дельно просто — за основу взять стандартные HTML элементы

CSS оформление меню

Сначала зададим стили основным элементам

И добавляем адаптивность.

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

Выпадающее меню при наведении

Ребят, нужно привести к нормальному виду. Должно быть выпадающее меню при наведении на город. И в каждом городе должны быть услуги, так же выпадающие. Вид оставить нужно такой же, просто сделать два выпадающих меню. Заранее спасибо за помощь. Внизу мои наработки.

29.08.2020, 10:08

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

Пропадает выпадающее меню при наведении
Проблема следующая: Имеется сайт на Битриксе в процессе разработки -.

При наведении на определенную область сделать выпадающее меню
Где-то ошибка в коде) Нужно что бы на наведение на область «loginform» выпадала меню с «Element.

При наведении не активные пункты меню смещаются, и не применяются изменения фона при наведении
У меня возникла проблема, при наведении не активные пункты меню смещаются, и не применяются.

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

Узнайте, как создать всплывающее меню с CSS.

Раскрывающемся

Раскрывающееся меню представляет собой переключаемое меню, позволяющее пользователю выбрать одно значение из стандартного списка:

Создание всплывающего раскрывающегося списка

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

Шаг 1) добавить HTML:

Пример

Пример как работает

Используйте любой элемент, чтобы открыть раскрывающееся меню, например , или

Используйте элемент контейнера (например,

Шаг 2) добавить CSS:

Пример

/* Dropdown Button */
.dropbtn <
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
>

— needed to position the dropdown content */
.dropdown <
position: relative;
display: inline-block;
>


/* Dropdown Content (Hidden by Default) */
.dropdown-content <
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
>

/* Links inside the dropdown */
.dropdown-content a <
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
>

/* Change color of dropdown links on hover */
.dropdown-content a:hover

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn

Пример как работает

Мы создали стиль выпадающего кнопки с фоном-цвет, обивка и т.д.

.dropdown класс использует position:relative , который необходим, когда мы хотим, чтобы раскрывающийся контент помещается прямо под кнопкой раскрывающегося списка (с помощью position:absolute ).

.dropdown-content класс содержит фактическое раскрывающееся меню. Он скрыт по умолчанию и будет отображаться при наведении курсора (см. ниже). Примечание min-width . имеет значение 160пкс. Вы можете изменить это. Совет: Если нужно, чтобы ширина раскрывающегося списка была такой же широкой, как и кнопка раскрывающегося списка, установите значение width 100% (и overflow:auto включите прокрутку на маленьких экранах).

Вместо использования границы мы использовали box-shadow свойство, чтобы выпадающее меню выглядело как «карточка». Мы также используем z-index для размещения раскрывающегося списка перед другими элементами.

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

Варианты реализации jQuery menu. Выпадающее меню на CSS3.
Вертикальное и горизонтальное меню для сайта. Аккордион меню.

Подборка самых популярных WordPress плагинов для любого сайта.

Здесь вы сможете скачать различные jQuery скрипты для любых проектов.

Бесплатно скачать CSS3 наработки с различными эффектами анимации.

Можно скачать файлы HTML5 с современными возможностями разработки.

Множество различных free PSD объектов для WEB-дизайна.

Колекция различных элементов form jQuery для вашего сайта.

Бесплатно скачать иконки для сайта в форматах PSD, PNG и так далее.

Коллекция всегда обновляющихся модальных окон на jQuery.

Разные примеры jQuery validate собраны в одном месте сайта.

Симпатичные варианты реализации ваших jQuery gallery.

Большой сборник широкоформатных и адаптивных jQuery slider`ов.

Ишите примеры реализации jQuery scroll? Это то, что вам нужно.

Красивые и динамичные всплывающие подсказки на jQuery и CSS3.

Интересные материалы на тему веб разработок, главные новости.

Подобрка плагинов Javascript, библиотек, фреймворков и т.д.

Коллекция потрясающих примеров анимации для вашего сайта.

Модернизация элементов форм, создание систем автозаполнения

Плагины для выбора и настройки даты и времени в формах

Предзагрузчики, анимация загрузки, перлоадеры и т.д.

Компоненты, содержащие в себе реализацию параллакс-эффекта.

Создание вкладок, оформление списков в удобную навигацию.

Все, что касается таблиц с данными: фильтр, сортировка и т.д.

Наработки SVG-графики и наложение на нее анимации. Просто красиво.

Отрисовка элементов на веб-странице с помощью html5 canvas.


Примеры элементов, которые реагируют при наведении на них.

Плагины для фото и видео галерей, способные приблежать контент.

Кнопки. Создание красивы и незабываемых кнопок для сайта.

Все, что касается сортировки данных на странице. Плагины html5.

Выборка данных. Множество примеров jQuery select.

Различные способы создания красивого и эффектного меню для сайта.

Дерево элементов. Построение множественных списков на странице.

Примеры объектов в трехмерном пространстве с помощью CSS3 и jQuery.

Responsive Sidebar Navigation — боковая навигация

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

  • 3
  • 1 445

Responsive S >

Pure CSS3 Parallax Menu — меню для сайта

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

  • 1
  • 2 120

Pure CSS3 Parallax Menu — меню для сайта

Mac launchpad in CSS — делаем меню в стиле Mac

Пример создания Mac Launchpad с помощью CSS3 и jQuery. Все как в оригинале: удобное меню, гладкая анимация, и эффект размытия на заднем плане.

  • 3
  • 1 499

Mac launchpad in CSS — делаем меню в стиле Mac

Несколько примеров 3-D навигации

Шесть примеров качественной 3-Д навигации. Появление меню слева, справа, сверху и снизу с различными эффектами анимации, реализуемой с помощью свойств CSS translateZ.


  • 2
  • 1 105

Несколько примеров 3-D навигации

SlickNav — плагин для создания выпадающего меню

Цукерберг рекомендует:  Авторские права - Авторские права на программу.

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

Меню для сайта

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

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

Еще одно круговое меню, которое выполнена на HTML и CSS, где при клике по кнопке идет основное раскрытие всех запросов, где идут под кнопками.

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

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

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

Новый вариант адаптивного меню, который идет в виде кнопок с красивым эффектом CSS на каждом элементе, где находятся ссылки и шрифтовые иконки.

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

Здесь представлено выпадающее меню аккордеона при помощи CSS с наведением или щелчком открытия под категорий для удобства в навигации по сайту.

В статье представлен отличный вариант навигация, как аккордеонное меню с использованием HTML и CSS, что отлично подойдет под разный стиль сайта.

Стильный вид на вертикальное аккордеонное меню, которое использует вложенных списки HTML, что при клике появляются под меню с помощью JavaScript.

Боковое меню аккордеон представляет собой список, где эффект раскрытие под категорий при клике с выражающейся панелью навигаций на CSS3 и JS.

В этом материале рассмотрим вопрос по созданию адаптивного меню для сайта с запросами по центру, где задействуем средство медиазапросов CSS и JS.

В серых тонах идет адаптивное горизонтальное меню для сайта, где структура навигаций идет на основе взаимосвязи html и css, а также JavaScript.

Анимированное меню боковой панели в темно прозрачном виде, что создано на HTML и CSS, которое полностью адаптивное под разные мобильные аппараты.

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

Выпадающее меню на чистом CSS / HTML

  • CSS / CSS3
  • Flexbox CSS
  • JavaScript
    • JavaScript с нуля
    • JS и Jquery
  • Уроки по 1С-Битрикс
    • Контент менеджер
      • Авторизация на сайте
      • Элементы управления
      • Работа с информацией
      • Управление структурой
    • Сайт на 1С-Битрикс
      • Создание landing page

  • Видео новости
  • Модули расширений
  • Расширения и плагины
    • Bootstrap

Дополнительное видео

ПОДПИСКА на УРОКИ

Выпадающее меню на чистом CSS / HTML

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

See the Pen POyzbW by Denis (@Dwstroy) on CodePen.

В уроке задействуем:

  • display: flex;
  • используем transition ;
  • будем позиционировать элементы при помощи position .

HTML структура горизонтального меню

П ервым делом напишем разметку под горизонтальное меню. Открываем свою среду разработки в моем случае это PhpStorm , создаем index.html файл, пропишем каркас html:5 , заменю lang на ru .

Все meta удалю кроме кодировки, пропишу свой заголовок «Tom menu».

Между body пишем тег header , а в нем блок с классом .dws-menu в котором будет находиться наше меню. Далее структура будет следующая, создадим списки в количестве пяти штук. В каждом списке будет ссылка с атрибутом href=»#» . Затем будет идти иконка I с классом .fa .fa-

Пропишем название пунктов меню (Главная, Продукция, Услуги, Новости, Контакты).

Далее отбираем и подключаем иконки. Переходим на сайт Font Awesome , отберем себе иконки под данные пункты меню:

Скачиваем архив с сайта с иконками, извлекаем его содержимое к себе на компьютер, копируем папку fonts и папку css в свою среду разработки.

В папке fonts лежат шрифты иконок, а в папке css их стили. Сжатые стили можно удалить font-awesome.min, подключим не сжатый font-awesome.css .

В index.html подключаем иконки, и прописываем каждому пункту свой стиль иконки (home, shopping-cart, cogs, th-list, envelope-open).

Основной каркас мы сделали, подменю сформируем после описания основного стиля, а теперь создадим файл где будем описывать основные стили горизонтального меню style.css и подключим его к index.html . Для проверки, что стили подключены, создам папку img , в ней размещу произвольную картинку на задний фон. Пропишем подключение картинки при помощи background .

Как видим у нас все отобразилось и далее приступим к описанию стилей.

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

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

Зададим header в 200 пик. и назначим шрифт Cuprum который можно скачать и отдельно подключить к себе на сайте, на всякий случай пропишем дополнительные шрифты.

Скроем маркеры у списков:

Списки отобразим по горизонтали при помощи display: flax , и делаем его по центру:

В header сделаем отступ только сверху, пропишем margin-top .

Оформим наше меню, зададим цвет кнопок, шрифт и т.д.

Отбираем ссылки nav > ul li , и делаем их блочными элементами. Задаем фон меню, пропишем отступы, укажем размер, цвет, уберем подчеркивание, и сделаем заголовки заглавными буквами.

Затем позиционируем иконки, спискам присвоим position: relative; для дальнейшее центровки иконок:

Цукерберг рекомендует:  Тест по PHP - Работа с XML

Далее отбираем иконки, позиционируем их абсолютно, отступ сверху делаем в 15 пик., с лева 12 пик, увеличим размер до 18 пик.


Назначим спискам разделитель в виде бордюрчика, отбираем первый элемент LI, задаем бордюр. Отбираем последний элемент LI присваиваем ему аналогичный бордюр.

Делаем разделители спискам LI :

Меню приобрело внешний вид, затем можно приступать к описанию стилей при наведении.

Анимируем горизонтальное меню при наведение

Отбираем ссылки и назначаем цвет блоку, и цвет самой ссылки с иконкой присвоим белый. Давайте добавим еще темную тень. С помощью transition в 0.3 сек сделаем плавное появление:

И что бы этот эффект плавно исчезал, добавим этот стиль к ссылке в покое:

Основное меню закончили и можно приступать к описанию подменю и вложенные в них меню.

Описываем выпадающее меню CSS / HTML

О ткрываем index.html и добавим, к примеру, в продукцию дополнительное меню. Между списками LI вставляем UL , в нем разместим пять списков, в которых будут находиться ссылки с атрибутом herf=”#” .

Жмем применить, пропишем название пунктов (Одежда, Электроника, Продукты питания, Инструменты, Быт. химия).

Затем открываем style.css и опишем стили подменю.

Отбираем второй список и присвоим ему position: absolute; , зададим минимальную ширину в 150 пик.

Пропишем спискам border в 1 пик.

Для ссылок в подменю установим отступы в 10 пик., уберем трансформацию текста и фон сделаем на пару тонов темнее background: #e4e4e5; .

Затем создадим еще одно вложенное меню. Перейдем в файл разметки и к примеру в «Электронике» формируем по аналогии меню как делали мы до этого. Описываем заголовки пунктов (Камеры, Компьютеры, Телефоны) и сохраняемся.

Они вывелись, но скрыты под основным меню, теперь position: absolute; вложенного UL и сдвинем его на 150 пик. в сторону:

Далее сделаем появление подменю при наведение на основные пункты верхнего меню, для этого добавляем display: none; и тем самым скрываем все внутренние пункты.

А для их появления отберем списки при наведении и отобразим их при помощи display: block; .

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

Затем давайте завершающим этапам оформим кнопки ингредиентом. Я пользуюсь CSS генератором , у меня создано несколько Presets , вы можете создать свои, в моем случае я просто копирую данный код и размещаю в место background который прописывал до этого.

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

Выпадающее меню на HTML / CSS без использования JavaScript

Очень часто необходимо сделать на сайте выпадающее при наведении меню. Большинство используют для этого JavaScript / Jquery. Это конечно хорошо, но такого роди задачи легко решаются с помощью HTML / CSS .

Вот простой пример меню:

Для построения меню был использован список с классом menu. Подменю сделаны списками с классом submenu.

Теперь давайте минимально оформим наше меню стилями:

Для класса submenu было установлено свойство ‘display: none’. Это позволило на спрятать наше выпадающее меню.

Это позволит показывать подменю при наведении.

Горизонтальное выпадающее меню на css и Html своими руками

Если вы попали сюда случайно или вы искали другую реализацию выпадающего меню советую перейти в родительский раздел выпадающее меню.

В этом разделе будет описанное горизонтальное выпадающее меню на CSS и HTML.

Навигация по странице:

И так, наша задача:

сделать горизонтальное меню с выпадающим списком css (на списках ul li) без использования jQuery и Javascript, а также без применения таблиц

в коде.

Выпадающее горизонтальное меню html

к менюПервым делом, перед тем как приступать писать код, нам нужно сделать html шаблон для меню.

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

Как видно с кода, наше выпадающее меню будет реализовано на списках ul и li. Вот так выглядит это меню без стилей CSS:

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

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

к менюСтили CSS для выпадающего меню и не только – вещь необходимая как воздух. Ведь выпадающая вкладка делается на основе псевдокласса :hover.

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

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

Вот теперь все. Сам механизм выпадашки реализован одной строчкой.

Смотрите скин с этим меню:

Рис. 2 (горизонтальное выпадающее меню)

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

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

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

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

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

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

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

Для очень длинных пунктов меню, такой вариант может быть не сильно удобным, так как они будут вылазить за пределы. Чтобы отключить это свойство, достаточно найти свойство «white-space:nowrap;» у селектора #menu1 ul li ul, и удалить его.

Ниже вы можете посмотреть демо или скачать исходники горизонтального выпадающего меню:

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих