html — Не работает выпадающее меню через CSS (hover)
Задать вопрос
Вопрос задан
Изменён 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;
}
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;
}
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
Зарегистрируйтесь или войдите
Регистрация через 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"> .dropdown-ne <дел> <ул>
<дел> <детали> <резюме aria-haspopup="true"> .dropdown-e <дел> <ул>
dropdown-e <дел> <детали> <резюме aria-haspopup="true"> .dropdown-se <дел> <ул>
dropdown-s <дел> <ул>
3
< li>Выпадающий список
<дел> <детали> <резюме aria-haspopup="true"> .dropdown-sw <дел> <ул>
dropdown-sw <дел> <детали> <резюме aria-haspopup="true"> .dropdown-w <дел> <ул>
2021