Как объединить эти два css кода

Question

@media (min-width: 768px) {
  .dropdown:hover .dropdown-menu . {
    display: block;
  }
}

@media (min-width: 768px) {
  .dropdown-submenu:hover>.dropdown-menu {
    display: block;
  }
}

Как объединить эти два CSS кода в один код, пожалуйста? Я хочу добавить dropdown-подменю в первый блок кода.

Answer 1

как то так

@media (min-width: 768px) {
   .dropdown:hover .dropdown-menu, .dropdown-submenu:hover > .dropdown-menu {
      display: block;
   }
}

Answer 2

Ваш исходный CSS на самом деле недействителен, со случайной точкой в ​​конце селектора здесь:

@media (min-width: 768px) {
  .dropdown:hover .dropdown-menu . {
    display: block;
  }
}

В той же строке, я не уверен, если вы предполагали, что это так, но CSS будет применяться только к .dropdown-menu классам, которые дочерние из .dropdown, когда .dropdown

Удаление ., объединение двух селекторов будет выглядеть следующим образом :

@media (min-width: 768px) {
  .dropdown:hover .dropdown-menu, .dropdown-submenu:hover>.dropdown-menu {
    display: block;
  }
}

Answer 3

Не будет ли объединение этих двух только этим?

@media (min-width: 768px) {
.dropdown:hover .dropdown-menu . {
    display: block;
  }
.dropdown-submenu:hover>.dropdown-menu {
    display: block;
  }
}