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

30.07.1993 alexxlab

Содержание

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

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

Вопрос задан 1 год 9 месяцев назад

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

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

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

.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

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

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

Почта

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

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

Почта

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

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

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

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

Перед написанием стилей для выпадающего меню необходимо создать структуру HTML документа. Данная структура будет представлять из себя обычный скелет сайта с добавленными тегами для меню. Меню будем создавать используя списки <UL> или <OL>.

Итак приступим к написанию основной структуры сайта


<!DOCTYPE html>
<html>
  <head>
    <title> Выпадающее меню на CSS </title>
  </head>
  <body>
   
  </body>

После того как написали основную структуру сайта необходимо создать структуру нашего меню. Для начала создадим меню верхнего уровня с помощью тегов <NAV> и <UL>


<nav>
  <ul>
    <li><a href='#'>Главная</a></li>
    <li><a href='#'>HTML</a></li>
    <li><a href='#'>CSS</a></li>
    <li><a href='#'>PHP</a></li>
    <li><a href='#'>JavaScript</a></li>
  </ul>
</nav>

Меню верхнего уровня у нас создано.

Теперь необходимо назначить стили для элементов меню.


nav {
     margin: 50px 0;
     bacground-color: #E94f56;
    }
nav ul {
        padding: 0;
        margin: 0;
        list-style: none;
        position: relative;
       }
nav ul li {
           margin: 0px -7px 0 0;
           display: inline-block;
           background-color: #E94f56;
           }
nav a {
       display: block;
       padding: 0 10px;
       color: #ffff;
       font-size: 23px;
       line-height: 60px;
       text-decoration: none;
       }
nav a:hover {
             backgroung-color: #000001;
            }

Проверим то что у нас получилось.

Теперь наше меню выглядит как меню. Теперь нам необходимо создать вложенное меню. Его мы создаем путем добавления внутрь тега <LI> еще одного списка <UL>. То есть у нас получается список в списке. Создадим структуру с вложенным меню.


<nav>
  <ul>
    <li><a href='#'>Главная</a></li>
    <li><a href='#'>HTML</a>
        <ul>
            <li><a href='#'>История HTML</a></li>
            <li><a href='#'>Структура HTML</a></li>
            <li><a href='#'>HTML5</a></li>  
        </ul>
    </li>
    <li><a href='#'>CSS</a></li>
    <li><a href='#'>PHP</a></li>
    <li><a href='#'>JavaScript</a></li>
  </ul>
</nav>

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

nav ul ul {
        display: none;
        position: absolute;
        top100%;
       }
nav ul li:hover>ul {
            display: inherit;
           }
nav ul ul li {
       min-width: 180px;
       float: none;
       display:list-item;
       position: relative;
       }

Должно получиться следующее

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

     li> a:after {content: '+'}
     li> a:only-child:after {content:'';}  

В итоге у нас получилось следующее

Выпадающий список | Primer CSS

На этой странице

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

Основные примеры

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

Использование кнопки GitHub:

<детали> <резюме aria-haspopup="true"> Падать <дел> <ул>

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

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

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

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

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

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

Выпадающий список | Primer CSS

Основные примеры

Параметры

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

3

Разделители

html — выпадающее меню CSS не будет правильно скрывать/отображать

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