HTML
spoiler<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Главная</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="menu3">
<div class="menu2">Главная</div>
<div id="sep1"></div>
<div class="menu">
<div class="wrap1">
<a class="menu1" id="main" href="">Главная</a>
<a class="menu1" id="menu_list" href="">Выпадающее меню</a>
<ul class="submenu">
<li><a>Пункт 1</a></li>
<li><a>Пункт 2</a></li>
</ul>
<a class="menu1" id="about" href="">О нас</a>
</div>
</div>
</div>
</body>
</html>
CSS
spoiler@import url('https://fonts.googleapis.com/css2?family=Balsamiq+Sans&family=Caveat&display=swap');
* {
margin: 0;
padding: 0;
text-decoration: none;
}
body {
text-decoration: none;
}
div {
display: block;
text-align: center;
}
.menu1 {
display: inline-block;
margin: 0 5px;
padding: 4.2px;
text-decoration: none;
font-family: 'Balsamiq Sans', cursive;
color: white;
}
#sep1 {
height: 20px;
background-color: white;
}
li {
list-style-type: none;
}
.menu2 {
background-color: green;
color: white;
font-size: 40px;
}
.menu {
background-color: green;
overflow: auto;
display: flex;
white-space: nowrap;
}
.wrap1 {
width: 1200px;
margin: auto;
}
.menu {
overflow: auto;
-ms-overflow-style: none;
scrollbar-width: none;
}
.menu::-webkit-scrollbar {
width: 0;
height: 0;
}
.menu {
overflow: auto;
-ms-overflow-style: none;
scrollbar-width: none;
}
.menu::-webkit-scrollbar {
width: 0;
height: 0;
}
.menu3 {
position: -webkit-sticky;
position: sticky;
top: 0;
overflow: hidden;
}
a:hover {
color: #FFFFFF;
transform: scale(1.1);
text-decoration: none
}
/* код из интернета для выпадающего меню */
.wrap1 ul {
display: none;
position: absolute;
top: 100%;
}
#menu_list:hover > .submenu {
display: inherit;
}
.wrap1 ul li {
min-width: 170px;
float: none;
display: list-item;
position: relative;
}
Пытаюсь сделать выпадающее меню для шапки, но ни один урок в интернете не помогает, везде делают с нуля, а у меня уже в CSS разное понаписано, видимо в свойствах выпадающего меню нужно учесть свойства шапки, а я не знаю как((
Причём в разных статьях по разному предлагается делать выпадающие списки((
Не могу найти причину, почему код не работает. Может дело в display, так как для класса menu указан display: flex?
Я новичок и путаюсь в бесконечных атрибутах. По сути ведь мы создаём выпадающий список, скрываем его и далее через hover прописываем его отображение при наведении курсора? Но видимо у меня в display и position что-то не так прописано. Или может быть неправильно ссылаюсь на теги?
Подскажите, пожалуйста.
Простой
