WordPress：如何在盘旋时显示子页面＆＃39;关于＆＃39;？

Question

• 紫色导航是主要导航。请忽略白色 导航

• 问题：创建仅在关系页面悬停时显示子页面。嵌套的子菜单ul是.sub-menu ...我该怎么做？

WORDPRESS发布的HTML

＆＃13;

＆＃13;

.sub-menu {
  display: flex;
  flex-direction: column;
  padding: 0;
  z-index: 999;
  background-color: green;
  color: blue;
  position: relative;
  left: 160px;
  top: 4px;
}

.sub-menu li {
  border-bottom: 1px #3e3b3b dotted;
}

.sub-menu li a {
  font-size: 1.1rem;
}

＆＃13;

<div class="menu-primary-menu-links-container">
  <ul id="menu-primary-menu-links" class="menu">
    <li id="menu-item-167" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-21 current_page_item menu-item-167"><a href="http://localhost/wordpress/">Home</a></li>
    <li id="menu-item-165" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-165"><a href="http://localhost/wordpress/about/">About</a>

      <ul class="sub-menu">
        <li id="menu-item-180" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-180"><a href="http://localhost/wordpress/our-team/">Our Team</a></li>
        <li id="menu-item-179" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-179"><a href="http://localhost/wordpress/our-mission/">Our Mission</a></li>
        <li id="menu-item-178" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-178"><a href="http://localhost/wordpress/members-data-bank/">Members Data Bank</a></li>
      </ul>
    </li>
    <li id="menu-item-170" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-170"><a href="http://localhost/wordpress/news-updates/">News Updates</a></li>
    <li id="menu-item-166" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-166"><a href="http://localhost/wordpress/blog/">Blog</a></li>
    <li id="menu-item-164" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-164"><a href="http://localhost/wordpress/contact/">Contact</a></li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;