CSS：尝试将导航子菜单下拉至悬停状态

Question

在尝试使此导航下拉菜单出现在悬停上时出现一些问题。我在https://dev-acupuncture.pantheonsite.io/

的开发站点上拥有它

它基于_underscores WordPress主题中的导航，因此令我感到惊讶的是，除非还有一些我需要插入的JS代码，否则它不起作用。而是使用纯CSS做到这一点。

HTML

<header>
  <div class="content">
    <a href="/" data-pjax="true">
      <img class="logo desktop" src="<?php echo get_template_directory_uri(); ?>/img/acumed-logo.svg"/>
      <img class="logo mobile" src="<?php echo get_template_directory_uri(); ?>/img/acumed-logo.svg"/>
    </a>
    <nav id="site-navigation" class="main-navigation">
        <div class="menu-nav-container">
    <ul class="primary-menu reset-list-style">
      <li class="nav-item menu-item-has-children"><a data-pjax href="/course-overview/">Course Overview</a></li>
        <ul class="sub-menu">
            <li class="nav-item"><a data-pjax href="/schedule/">Schedule</a></li>
            <li class="nav-item"><a data-pjax href="/faculty/">Faculty</a></li>
            <li class="nav-item"><a data-pjax href="/venue/">Venue</a></li>
        </ul>
      <li class="nav-item"><a data-pjax href="/accreditation/">Accreditation</a></li>
      <li class="nav-item"><a data-pjax href="/registration/">Registration Info</a></li>
      <li class="nav-item nav-contact"><a href="#contact">Content</a></li>
      <li class="nav-item"><a class="button button-blue" href="/registration/">Register</a></li>
      <li class="nav-item"><a class="button button-outline" href="/dashboard/">Course Login</a></li>
    </ul>
        </div>
    </nav>
  </div>
</header>

CSS

nav ul {margin: 0;}

nav ul ul {
    background: #fff;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    float: left;
    position: absolute;
    top: 100%;
    left: -999em;
    width: 200px;
    z-index: 99999;
}

nav ul ul li:hover > ul,
nav ul ul li.focus > ul {
   left: 100%;
}

nav ul ul a {
    width: 200px;
}

nav li {
    float: left;
    position: relative;
}

nav ul li::before {
    display: none;
}

nav ul li:hover > ul,
nav ul li.focus > ul {
    left: auto;
}

header .content nav ul ul li {
    padding: 8px 20px!important;
    clear: both;
}