Меню в html: Меню для сайта html и css горизонтальное

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

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

Вопрос задан

Изменён 1 год 10 месяцев назад

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

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

.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

2

Нужно было вложить .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>

2

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

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

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

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

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

Почта

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

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

Почта

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

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

CSS3 Menu.

Бесплатная программа для создания меню CSS

Обзор

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

Вы можете создать современное меню без Javascript и картинок, эффективно используя новые CSS3 свойства: радиус границы и анимацию. Это меню прекрасно работает с Firefox, Opera, Chrome и Safari. Выпадающее меню работает также в браузерах, которые не поддерживают CSS3, таких как ИЕ7+, но закругленные углы и тени не будут отображаться. Эффекты CSS3 однажды заменят всю jQuery анимацию, которую используют дизайнеры.

Особенности меню

  • Javascript не требуется


    Работает в браузерах с отключенным скриптом, или если браузер не поддерживает Javascript вообще.

  • Адаптивное меню
    Меню легко адаптируется к устройству, с которого его просматривают. Смотреть адаптивное демо…

  • Дружественное к SE
    Дружественное к поисковым системам и текстовым браузерам.

  • Поддержка браузеров
    Работает во всех современных браузерах (в ИЕ6 доступен только верхний уровень меню).

  • Поддержка устройств
    Работает на всех современных устройствах (iPhone, iPad, Android, Blackberry, Windows Phone).

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

  • Дизайн, основанный на 100%-ом CSS
    Меню основано только на HTML списке ссылок (UL/LI структура) и CSS. Никакие дополнительные не CSS параметры не используются.

  • Великолепные CSS3 свойства
    Многоуровневое выпадающее меню создано с использованием Закругленных углов CSS3 (CSS3 border-radius), Тени CSS3 (box-shadow и css3 text-shadow).

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

  • Мега-меню с многоколоночным подменю
    Создавайте Мега-меню с многоколоночными подменю. Указывайте количество строк, которое хотите иметь.

  • Маленький размер
    Мгновенная загрузка меню. Не использует дополнительные файлы.

Получить полную версию

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

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

Помощь

Смотри также:

Технические вопросы
Вопросы лицензирования
Недавние вопросы

Как создать стильное анимированное CSS3 меню без JavaScript

1) Откройте приложение CSS3 Menu, нажмите кнопки «Добавить элемент» и «Добавить подменю» , расположенные на панели инструментов CSS3 Menu, чтобы создать меню. Также Вы можете использовать кнопку «Удалить элемент» , чтобы удалить некоторые кнопки.

2) Используйте готовые шаблоны. Чтобы это сделать, выберите понравившуюся тему в списке «Шаблоны». Дважды щелкните по теме чтобы применить ее.

3) Настройка внешнего вида меню.
 3.1. Кликом выберите элемент и измените настройки внешнего вида кнопки для нормального и наведенного состояний, установите ссылку и значение атрибута Target на вкладке «Главное меню».

 3.2. Кликом выберите элемент и измените внешний вид подменю для нормального и наведенного состояний, установите ссылку и значение атрибута Target на вкладке «Подменю».

4) Сохранение меню.
 4.1. Сохранение файла проекта. Чтобы сохранить проект, просто нажмите кнопку «Сохранить» , расположенную на панели инструментов или выберите пункты «Сохранить» или «Сохранить…» в главном меню.
 4.2. Публикация меню в формате HTML. Чтобы сделать это, нажмите кнопку «Опубликовать» на панели инструментов.

Связаться с нами

CSS3 Menu
При обнаружении ошибок в работе программы, возникновении вопросов и пожеланий свяжитесь с технической поддержкой . Убедитесь, что в письмо включена информация о браузере, ОС, версии CSS3Menu, а также ссылка на вашу страницу. В большинстве случаев Вы получите ответ в течение одного рабочего дня. Пожалуйста, сначала ознакомьтесь с FAQ. Возможно, на ваш вопрос уже ответили.

E-mail:

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

❮ Назад Далее ❯


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


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

Главная страница Ссылка 1 Ссылка 2 Ссылка 3 Ссылка 4

Попробуйте сами »


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

Шаг 1) Добавьте HTML:

Пример


Шаг 2) Добавьте CSS:

Пример

. vertical-menu {
  ширина: 200 пикселей; /* Установите ширину, если хотите */

}

.vertical-menu a {
  background-color: #eee; /* Серый цвет фона */
  color: black; /* Черный текст цвет */
  отображение: блок; /* Сделать так, чтобы ссылки отображались ниже друг друга */
  padding: 12px; /* Добавляем отступы */
  украшение текста: нет; /* Удалить подчеркивание из ссылок */
}

.vertical-menu a:hover {
 фоновый цвет: #ccc; /* Темно-серый фон при наведении мыши */
}

.vertical-menu a.active {
  background-color: #04AA6D; /* Добавляем зеленый цвет к ссылке «активный/текущий» */
  цвет: белый;
}

Попробуйте сами »



Меню вертикальной прокрутки

Главная Ссылка 1 Ссылка 2 Ссылка 3 Ссылка 4 Ссылка 5 Ссылка 6 Ссылка 7 Ссылка 8 Ссылка 9Ссылка 10

Задайте конкретную высоту и добавьте свойство overflow , если хотите меню с вертикальной прокруткой:

Пример

. vertical-menu {
  width: 200px;
 высота: 150 пикселей;
переполнение-у: авто;
}

Попробуйте сами »

Совет: Ознакомьтесь с нашим учебным пособием How To-Side Navigation, чтобы узнать, как создать фиксированную боковую навигацию во всю высоту.

❮ Предыдущий Следующий ❯


ВЫБОР ЦВЕТА



Лучшие учебники
Учебник по HTML
Учебник по CSS
Учебник по JavaScript
Учебник How To
Учебник по SQL
Учебник по Python
Учебник по W3.CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

800 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3. CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

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

Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Создайте адаптивное выпадающее меню в HTML и CSS за десять шагов | Лиз Фариа

Следуйте вместе с Codepen

Я импортировал значок из Font Awesome. Чтобы значок работал, вы должны включить следующий тег script в заголовок вашего файла index.html:

Непосредственно под тегом body в HTML-коде создайте метку для «переключателя». Атрибут «for» привязывает этот значок к соответствующему элементу класса «переключатель», который мы создадим в HTML-коде адаптивного меню.

Кодируйте адаптивную навигацию везде, где считаете нужным в своем HTML-коде. Поверх этого тега

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

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *