Не могу понять как правильно обращаться к элементу

Question

объясните мне вот что: я хочу сделать так , чтобы при сужении станицы меньше 800px выскакивало меню, но при обращении к классу у меня ничего не работает, стоит только добавить мне div.класс, как все начинает работать, а если я добавлю div к .ul__menu2{ margin-top: -10px; display: none; - то опять ничего не работает

<div class="ul__menu2">
    <ul >
          <a href=""><li>К1</li></a>
          <a href=""><li>С2 </li></a>
          <a href=""> <li>Т3</li></a>
          
            <a href=""><li>Н4</li></a>
         </ul>
        </div>


@media (max-width:800px)
div.ul__menu2 {
     background-color: rgb(45, 173, 66);
display: block;
position: fixed;
height: 100%;
width: 100%;
 }
}
.ul__menu2{
margin-top: -10px;
display: none;
}

Answer 1

так нужно?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .ul__menu2 {
            position: fixed;
            display: none;
            height: 100%;
            width: 100%;
            } 
        @media (max-width:800px) {
            .ul__menu2 {
                background-color: rgb(45, 173, 66);
                display: block;
                margin-top: -10px;
            }   
        }
    </style>
</head>
<body>
    
<div class="ul__menu2">
    <ul >
          <a href=""><li>К1</li></a>
          <a href=""><li>С2 </li></a>
          <a href=""> <li>Т3</li></a>
          <a href=""><li>Н4</li></a>
    </ul>
</div>

</body>
</html>

Answer 2

Внимательнее со скобками. Один медизапрос это объект с объектами - media_condition{ {class},{class_two} }

.ul__menu2 {
  display: none;
  margin-top: -10px;
}

@media (max-width:800px) {
  .ul__menu2 {
    position: fixed;
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgb(45, 173, 66);
  }
}

<div class="ul__menu2">
  <ul>
    <li><a href="#">K1</a></li>
    <li><a href="#">C2</a></li>
    <li><a href="#">T3</a></li>
    <li><a href="#">H4</a></li>
  </ul>
</div>

БЛОГ НА HUSL

Не могу понять как правильно обращаться к элементу

Ответы (2 шт):