html — Не работает выпадающее меню через CSS (hover)
Задать вопрос
Вопрос задан
Изменён 2 года 2 месяца назад
Просмотрен 384 раза
Я только начала учиться, уже возникают небольшие проблемки:( Уже все перепробовала и перепроверила, не появляется выпадающее меню при наведении. Делала по уроку.
.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
Зарегистрируйтесь или войдите
Регистрация через Google
Регистрация через Facebook
Регистрация через почту
Отправить без регистрации
Почта
Необходима, но никому не показывается
Отправить без регистрации
Почта
Необходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
Css выпадающий список — Stack Overflow на русском
Вопрос задан
Изменён 7 лет 8 месяцев назад
Просмотрен 4k раз
надо с помощью только css сделать выпадающий список
каждый пункт меню в себе имеет еще несколько (первый например 2 , а второй 3)
как сделать так , чтобы высота пункта при наведении увеличивалась в 2 или в 3 раза в зависимости от пункта.
Только средствами css это возможно??
3
Если я правильно понял Вас, то это поможет:
HTML
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Frontend Development</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a>
<ul>
<li><a href="#">Resets</a></li>
<li><a href="#">Grids</a></li>
<li><a href="#">Frameworks</a></li>
</ul>
</li>
<li><a href="#">JavaScript</a>
<ul>
<li><a href="#">Ajax</a></li>
<li><a href="#">jQuery</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Backend Dev</a>
<ul>
<li><a href="#">Ruby</a>
<ul>
<li><a href="#">Ruby on Rails</a></li>
<li><a href="#">Sinatra</a></li>
</ul>
</li>
<li><a href="#">PHP</a>
<ul>
<li><a href="#">WordPress</a></li>
<li><a href="#">Symfony</a></li>
</ul>
</li>
</ul>
</li>
<li><p>From Russia with <span</span></p></li>
</ul>
SCSS
ul {
list-style: none;
padding: 0;
margin: 0;
background: #1bc2a2;
li {
display: block;
position: relative;
float: left;
background: #1bc2a2;
ul {
display: none;
li { border-top: 0; }
}
a {
display: block;
padding: 1em;
text-decoration: none;
white-space: nowrap;
color: white;
&:hover { background: #2c3e50; }
}
p {
color: white;
padding-left: 1em;
& span {
color: red;
}
}
}
}
li:hover {
> ul {
display: block;
position: absolute;
}
li {
float: none;
& a:hover { background: #2c3e50; }
}
a { background: #1bc2a2; }
}
ul ul ul {
left: 100%;
top: 0;
}
// Clearfix
ul {
&:before, &:after {
content: " ";
display: table;
}
&:after { clear: both; }
}
Поиграться на CodePen можно здесь.
1
Зарегистрируйтесь или войдите
Регистрация через Google
Регистрация через Facebook
Регистрация через почту
Отправить без регистрации
Почта
Необходима, но никому не показывается
Отправить без регистрации
Почта
Необходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
Самый простой способ создать его для своего сайта!
КСС
04 января 2023 г.
Линас Л.
4 мин Чтение
Выпадающее меню содержит список страниц и подстраниц. Пользователи могут получить доступ к его содержимому, щелкнув или наведя курсор на меню.
Этот элемент дизайна уменьшает беспорядок кнопок, ссылок и текста, что полезно для улучшения пользовательского интерфейса веб-сайта или приложения на небольших экранах.
Продолжайте читать, поскольку мы рассмотрим шаги по созданию выпадающего меню с использованием HTML и CSS. Вы также научитесь применять стили к недавно созданному раскрывающемуся меню, чтобы оно соответствовало брендингу вашего проекта.
Загрузить полную памятку по CSS
Для этого руководства требуется текстовый редактор для создания файла HTML и CSS, содержащего код раскрывающегося меню. Как вариант, вы можете сделать это через Файловый менеджер вашей панели управления хостингом. В следующем руководстве по раскрывающемуся меню будет использоваться последний метод.
Шаг 1.
Создание файла с кодом HTMLДля начала создайте файл HTML для фактического содержания и синтаксиса раскрывающегося меню. Перейдите к диспетчеру файлов с панели управления hPanel и создайте новый файл с именем 9.0019 menu.html
внутри каталога public_html .Файл menu.html будет содержать элементы выпадающего меню — один родительский элемент с пятью пунктами меню. Каждое подменю будет перенаправлять пользователей на разные страницы вашего сайта.
Добавьте в файл menu.html следующий код:
html">Подменю 3
Классы dropdown, mainmenubtn, и dropdown-child представляют разные элементы HTML. CSS будет использовать их для доступа к определенному элементу и изменения его дизайна.
Вот как будет выглядеть HTML-меню без каких-либо правил CSS:
Совет профессионала
Не забудьте заменить ссылки внутри атрибутов href URL-адресами страниц вашего веб-сайта и переименовать подменю, чтобы отразить фактическое содержание страницы.
Шаг 2. Добавление CSS и создание эффекта раскрывающегося списка
Теперь, когда у вас есть элементы HTML для работы, давайте создадим эффект раскрывающегося списка и правила CSS для каждого из них.
Создайте внутреннюю таблицу стилей в файле menu.html , поместив следующий код в элемент