@Soul1

Как исправить ошибку в выпадающем меню?

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 что-то не так прописано. Или может быть неправильно ссылаюсь на теги?

Подскажите, пожалуйста.
  • Вопрос задан
  • 69 просмотров
Пригласить эксперта
Ответы на вопрос 1
valgerofficial
@valgerofficial
Десигнер LVL100
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы