0

объясните мне вот что: я хочу сделать так , чтобы при сужении станицы меньше 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;
} 
3
  • Концовка вопроса совсем не понятна. Добавляете див класс - работает, а если добавить див класс, то опять ничего не работает.
    – Daniil
    6 мая 2022 в 6:28
  • Вот смотрите, почему если я делаю запись @media (max-width:800px) div.ul__menu2 { (а другой .ul__menu2 без div), то все работает. А если я делаю div.ul__menu2{ margin-top: -10px; display: none; (а другой без div), то не работает. Я если что потратил на решение загадки 2 часа. 6 мая 2022 в 9:35
  • У меня даже не работало когда я div ставил к обеим .ul__menu2, но мне внизу уже подсказали что @media нужно снизу писать. 6 мая 2022 в 9:39

2 ответа 2

0

так нужно?

<!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>

3
  • вы бы еще объяснили почему порядок важен, и верстку в li-a откорректировали
    – teran
    6 мая 2022 в 6:49
  • Порядок всегда важен, Вы сперва блок создайте а потом стили медиа для него. Если я не ошибаюсь стили загружаются сверху вниз. А Вы сделали наоборот. 6 мая 2022 в 7:06
  • Стили поменял, мне так привычно, все в основном прописывать, а потом в медиа менять. Можете стили оставить как вы написали 6 мая 2022 в 7:12
0

Внимательнее со скобками. Один медизапрос это объект с объектами - 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>

2
  • Спасибо! Но тут больше вопрос был почему такая путаница с div-ами происходит. И как это вообще так получается? 6 мая 2022 в 9:53
  • Приоритет стилей, он идёт не только снизу-вверх (последние перебивают верхние) в css документе, но и зависит от синтаксиса. "тег+класс" (div.ul__menu2) имеет бОльший приоритет, чем только "класс" (ul__menu2). Медиазапросы никак не влияют на приоритет. wp-kama.ru/note/css-prioritety-kaskadnost +++ developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/…
    – Iurii
    6 мая 2022 в 13:43

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.