Как я могу переключить пункт подменю WordPress скрыть / показать

Question

Я создаю тему WordPress, и я создал отзывчивую панель навигации с помощью CSS.Это мой код:

<nav>
    <?php wp_nav_menu(); ?>
</nav>

А это CSS:

nav ul {
      list-style: none;
  }
  nav ul li{
    display: inline-block;
}


  nav a{
      position: relative;
      display: inline-block;
      font-size: 13px;
      line-height: 40px;
      padding: 0 2em;
      -webkit-transition: all .3s ease;
  }
  nav a:hover{
      background: rgba(255,255,255,.9);
      color: black;
  }

Моя отзывчивая панель навигации работает нормально, но я не понимаю, как скрыть элементы подменю?и только он должен быть виден при наведении мыши.

Answer 1

Ваша основная структура выглядит так:

<ul>
  <li>Menu item</li>
  <li>Sub-menu
    <ul>
      <li>Sub-menu item</li>
    </ul>
  </li>
</ul>

Практически все, что вы хотите сделать, - это скрыть все подменю по умолчанию (используя display: none), а затем, когда элемент parent наведен, используйте display:block, чтобы снова сделать их видимыми.

Все подменю являются списками (ul), вложенными непосредственно в элементы списка. Таким образом, вы можете нацелить их, идентифицируя всех ul, которые являются непосредственными потомками li:

/* Hides all sub-menus */
li > ul {
  display: none;
}

Затем, когда вы хотите отобразить подменю, вам нужно настроить таргетинг на все списки (ul), которые являются непосредственными потомками элементов списка (li), на которые в данный момент наведены ссылки:

/* Show sub-menu when hovering over parent item */
li:hover > ul {
  display: block;
}

Я включил ваш код ниже. Я изменил ваш HTML, добавив дополнительные дочерние элементы и вложенное меню. Меню sub-sub расположено немного странно, но это из-за вашего существующего CSS, который я также сохранил.

/* Submenu */
li > ul {
  display: none;
}

li:hover > .sub-menu {
  display: block;
}

/* Your original CSS (unchanged) */
nav ul {
  list-style: none;
}

nav ul li {
  display: inline-block;
}

nav a {
  position: relative;
  display: inline-block;
  font-size: 13px;
  line-height: 40px;
  padding: 0 2em;
  -webkit-transition: all .3s ease;
}

nav a:hover {
  background: rgba(255, 255, 255, .9);
  color: black;
}

<nav>
  <div class="menu-main-container">
    <ul id="menu-main" class="menu">
      <li id="menu-item-32" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-32"><a href="#">Services</a>
        <ul class="sub-menu">
          <li id="menu-item-65" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-65"><a href="#">Sub menu 1</a></li>
          <li id="menu-item-65" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-65"><a href="#">Sub menu 2</a></li>
          <li id="menu-item-65" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-65"><a href="#">Sub menu 3 with sub-sub menu</a>
            <ul class="sub-menu">
              <li id="menu-item-65" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-65"><a href="#">Sub-sub menu 1</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

Обратите внимание, что у вашего исходного кода есть класс подменю в вложенных меню. Я не использовал этот класс, потому что я не знаком с word-press, чтобы знать, будет ли у подменю также имя этого класса, или будет ли он использовать что-то другое.

Если WordPress использует класс .sub-menu последовательно, вы можете использовать вместо этого следующие правила:

/* Hides all sub-menus */
.menu-item .sub-menu {
  display: none;
}
.menu-item:hover .sub-menu {
  display: block;
}

Answer 2

Попробуйте изменить исходный CSS на nav ul li на это:

#menu-main > li {
  display: inline-block;
}

Селектор > обеспечивает таргетинг только на дочерние элементы прямого потомка #menu-main, верхний уровень ul.

Кроме того, WordPress добавит класс sub-menu к «выпадающим» ul элементам в вашем меню, поэтому нацеливайтесь на такие как:

nav .sub-menu {
  display: none;
}
#menu-main > li:hover .sub-menu {
  display: inline-block;
}

Первое правило скрывает эти выпадающие списки, второе правило показывает раскрывающийся список элемента навигации верхнего уровня, на который наведен указатель. Возможно, я бы использовал другие значения для свойства display, но это зависит от вашей конкретной реализации, это должно обеспечить скрытие / показ.