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

05.08.2023 alexxlab

Содержание

html — Не работает выпадающее меню через CSS (hover)

Задать вопрос

Вопрос задан 2 года 4 месяца назад

Изменён 2 года 4 месяца назад

Просмотрен 419 раз

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

.root {
  list-style-type: none;
  display: inline-block;
  position: relative;
  padding: 10px 15px;
  background-color: #ccc;
  cursor: pointer;
}
.root:hover {
  position: relative;
  display: inline-block;
  background-color: aqua;
}
.root:hover .dropdown {
  display: block;           // Вот тут не работает
  background-color: #ccc;
}
. dropdown {
  display: none;
  position: absolute;
  top: 54px;
  left: 48px;
  box-sizing: border-box;
  background-color: aquamarine;
  padding: 10px;
  width: 100%;
}
.dropdown>li {
  cursor: pointer;
  list-style: none;
}
.dropdown>li:hover {
  color: aqua;
}

<body>
  <ul>
    <li>Меню</li>
    <ul>
      <li>1-й элемент</li>
      <li>2-й элемент</li>
    </ul>
    <li>Меню 2</li>
    <ul>
      <li>3-й элемент</li>
      <li>4-й элемент</li>
    </ul>
  </ul>
</body>

html
css
меню
hover

Нужно было вложить

.dropdown в .root

.root {
  list-style-type: none;
  display: inline-block;
  position: relative;
  padding: 10px 15px;
  background-color: #ccc;
  cursor: pointer;
}
.root:hover {
  position: relative;
  display: inline-block;
  background-color: aqua;
}
. root:hover .dropdown {
  display: block;
  background-color: #ccc;
}
.dropdown {
  display: none;
  position: absolute;
  top: 54px;
  left: 48px;
  box-sizing: border-box;
  background-color: aquamarine;
  padding: 10px;
  width: 100%;
}
.dropdown>li {
  cursor: pointer;
  list-style: none;
}
.dropdown>li:hover {
  color: aqua;
}

<body>
  <ul>
    <li>Меню
      <ul>  // .dropdown находится внутри .root
        <li>1-й элемент</li>
        <li>2-й элемент</li>
      </ul>
    </li>
    <li>Меню 2
      <ul>
        <li>3-й элемент</li>
        <li>4-й элемент</li>
      </ul>
    </li>
  </ul>
</body>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Организация выпадающего списка при наведении курсора на словосочетание — Вопрос от Січинці школа

Вопросы
Горячие
Пользователи
Вход/Регистрация

Категории вопросов

Задать вопрос +

Основное

Вопросы новичков (16655)

Платные услуги (2162)
Вопросы по uKit (82)

Контент-модули

Интернет-магазин (1444)

Редактор страниц (237)
Новости сайта (501)
Каталоги (809)

Блог (дневник) (114)
Объявления (296)
Фотоальбомы (434)

Видео (258)
Тесты (60)
Форум (581)

Продвижение сайта

Монетизация сайта (222)
Раскрутка сайта (2463)

Управление сайтом

Работа с аккаунтом (5355)
Поиск по сайту (427)
Меню сайта (1767)
Домен для сайта (1546)
Дизайн сайта (13510)
Безопасность сайта (1489)
Доп. функции (1311)

Доп. модули

SEO-модуль (225)
Опросы (63)
Гостевая книга (99)
Пользователи (433)
Почтовые формы (320)
Статистика сайта (198)
Соц. постинг (213)
Мини-чат (91)

Вебмастеру

JavaScript и пр. (645)
PHP и API на uCoz (236)
SMS сервисы (10)
Вопросы по Narod. ru (435)
Софт для вебмастера (39)

…

Bootstrap Dropdown Hover

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

Зависимости компонентов

Требуются файлы jQuery, Bootsrap 3.x CSS и JavaScript. Зависит от компонента Bootstrap Dropdown и animate.css, если вы хотите использовать анимацию.

Установка

Просто включите стиль Dropdownhover и файлы сценариев после Bootstrap.

 

  <голова>
    Шаблон Bootstrap 101
    
    <ссылка href="css/bootstrap. min.css" rel="таблица стилей">
    
    <ссылка href="css/animate.min.css" rel="таблица стилей">
    
  
  <тело>
     Привет, мир!

Пример

Оберните триггер раскрывающегося списка и раскрывающееся меню в .dropdown , поскольку это важно. Добавьте data-hover="dropdown" к основной кнопке действия или ссылке, чтобы активировать событие hover .

 <дел>

Выравнивание

В основном выпадающее меню позиционируется с помощью CSS, но если выпадающее меню находится за пределами области просмотра, оно позиционируется с помощью JavaScript в соответствии с окном. Также выпадающее меню поддерживает классы .dropdown-menu-right и .pull-right для выравнивания выпадающего меню вправо.

Возможны проблемы с обрезкой

Выпадающее меню использует CSS и JavaScript для позиционирования, но есть некоторые проблемы с «длинными» выпадающими меню на маленьких экранах. Плагин автоматически пытается найти лучшее решение, но есть вероятность, что часть выпадающего списка будет обрезана. Поэтому старайтесь избегать выпадающих меню, которых больше 9. 0017 500px высота.

 
  ...

или

...

Tree

Добавьте data-hover="dropdown" в

или

 ...
 Анимации  Добавьте  data-animations="{bottom} {left} {top} {right}" , чтобы включить пользовательскую анимацию. Использование animate.css также может быть анимировано с помощью пользовательских анимаций, поскольку имена анимаций являются классами CSS для анимаций.
 Нижняя анимация
 DefaultbouncebounceInbounceInDownbounceInLeftbounceInRightbounceInUpfadeInfadeInDownfadeInLeftfadeInRightfadeInUpflipflipInXflipInYrotateInrotateInDownLeftrotateInDownRightrotateInUpLeftrotateInUpRightslideInDownslideInLeftslideInRightslideInUpzoomInzoomInDownzoomInLeftzoomIn RightzoomInUpflashhingelightSpeedInpulserubberBandshakeswingtadawobble
 Левая анимация
 DefaultbouncebounceInbounceInDownbounceInLeftbounceInRightbounceInUpfadeInfadeInDownfadeInLeftfadeInRightfadeInUpflipflipInXflipInYrotateInrotateInDownLeftrotateInDownRightrotateInUpLeftrotateInUpRightslideInDownslideInLeftslideInRightslideInUpzoomInzoomInDownzoomInLeftzoomIn RightzoomInUpflashhingelightSpeedInpulserubberBandshakeswingtadawobble
 Топ-анимация
 DefaultbouncebounceInbounceInDownbounceInLeftbounceInRightbounceInUpfadeInfadeInDownfadeInLeftfadeInRightfadeInUpflipflipInXflipInYrotateInrotateInDownLeftrotateInDownRightrotateInUpLeftrotateInUpRightslideInDownslideInLeftslideInRightslideInUpzoomInzoomInDownzoomInLeftzoomIn RightzoomInUpflashhingelightSpeedInpulserubberBandshakeswingtadawobble
 Правая анимация
 DefaultbouncebounceInbounceInDownbounceInLeftbounceInRightbounceInUpfadeInfadeInDownfadeInLeftfadeInRightfadeInUpflipflipInXflipInYrotateInrotateInDownLeftrotateInDownRightrotateInUpLeftrotateInUpRightslideInDownslideInLeftslideInRightslideInUpzoomInzoomInDownzoomInLeftzoomIn RightzoomInUpflashhingelightSpeedInpulserubberBandshakeswingtadawobble
 data-animations="fadeInDown fadeInLeft fadeInUp fadeInRight" 
 Как создать выпадающее меню при наведении с помощью HTML и CSS | Ндубуиси Агбанду 
 2 минуты чтения
 ·
 16 июля 2019 г.
 Фото: Line25.com Вероятно, вы сталкивались с веб-страницей с подобными вещами, и вам интересно, как это было сделано?
 На самом деле я собираюсь провести вас через процесс, который я лично использую при этом. Но учтите, очень важно, чтобы вы понимали логику, стоящую за этим, а не просто копировали и писали код. Итак, не теряя времени, давайте перейдем к коду…..
 Программирование основано на логике, а не на коде: потому что для получения одного и того же результата можно использовать разные коды и подходы.
   ШАГИ  
 #1. Откройте текстовый редактор и введите в нем обычный HTML-код. Например, doctype, html, head и т. д.
 #2. В элементе body откройте div с элементом внутри него. Элемент может быть элементом кнопки, элементом привязки (a) и т. д. а затем дайте ему имя класса.
 #3. Откройте другой div с именем класса внутри первого div. Именно внутри этого div вы поместите свое выпадающее содержимое. См. код ниже…
  
   
  
  
  Учебное пособие по выпадающему меню при наведении  
  
   
  
  
  
 Технологии 
 Бизнес 
 Транспорт 
 
 
 
 
  
  
   ШАГИ CSS  
 Присвойте контейнеру отображение встроенного блока и положение относительно всего экрана, используя приведенный ниже код:
 .dropdown { 
 display: inline-block; 
 должность: родственник; 
 } 
 2. Присвойте другому div(.dropdown-content) внутри первого контейнера display: none и position: absolute, используя следующий код:
 .dropdown-content { 
 display: none; 
 позиция: блок; 
 } 
 3.

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

html — Не работает выпадающее меню через CSS (hover)

Зарегистрируйтесь или войдите

Отправить без регистрации

Отправить без регистрации

Организация выпадающего списка при наведении курсора на словосочетание — Вопрос от Січинці школа

Основное

Контент-модули

Продвижение сайта

Управление сайтом

Доп. модули

Вебмастеру

Bootstrap Dropdown Hover

Зависимости компонентов

Установка

Привет, мир!

Пример

Выравнивание

Возможны проблемы с обрезкой

Tree

Как создать выпадающее меню при наведении с помощью HTML и CSS | Ндубуиси Агбанду

Добавить комментарий Отменить ответ