下拉菜单在 WordPress 中不起作用

Question

我在一个带有 CSS/HTML 的 WordPress 网站中使用下拉菜单，但它无法正常工作。我已经尝试了几个小时，但它看起来还是坏了。

.navbar-nav.ml-auto.menu_item {
    margin-top: 20px;
}

.navbar-nav {
    overflow: hidden;
}

.navbar-nav a {
    text-decoration: none;
    text-align: center;
    padding: 10px 12px;
}

.sub-menu {
  list-style: inherit;
  margin: 0;
  padding-left: 0;

}

.sub-menu a {
  padding: 12px 16px;
  text-decoration: none;
  display: inline-block;
  text-align: left;
}

.sub-menu li {
  text-decoration: none;
  display: block;
  text-align: left;
}

.sub-menu li:hover {
  float: none;
  color: black;
  text-decoration: none;
  display: block;
  text-align: left;
}




.navbar-nav a:hover, .sub-menu:hover .sub-menu {
  background-color: #FBAF1B;
}

.menu-main-menu {
    
}

.menu_item a {
    font-size: 18px !important;
    font-weight: 900;
    color: #031229 !important;
    text-transform: uppercase;
    display: inline-block;
}

            <div class="navbar-nav ml-auto menu_item">
      <ul class="navbar-nav">
      
             <div class="menu-main-menu-container"><ul id="menu-main-menu" class="menu"><li id="menu-item-212" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-212"><a href="https://www.solexcel.com.au/about/">About</a></li>
<li id="menu-item-3766" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3766"><a href="https://www.solexcel.com.au/service-areas/">Service Areas</a></li>
<li id="menu-item-4053" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-4053"><a href="#">Products</a>
<ul class="sub-menu">
    <li id="menu-item-4151" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4151"><a href="https://www.solexcel.com.au/panels/">Panels</a></li>
    <li id="menu-item-4150" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4150"><a href="https://www.solexcel.com.au/inverters/">INVERTERS</a></li>
    <li id="menu-item-4152" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4152"><a href="https://www.solexcel.com.au/power-saving-unit/">Power Saving Unit</a></li>
</ul>
</li>
<li id="menu-item-263" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-263"><a href="https://www.solexcel.com.au/blogs/">Blogs</a></li>
<li id="menu-item-236" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-236"><a href="https://www.solexcel.com.au/est-solar-inverter-in-melbourne-victoria-australia/">Contact</a></li>
</ul></div>       
<a href="https://www.solexcel.com.au/#quot" class="nav-item1 nav-link get_ww">Get </br>Started</a>

之前运行良好，但突然我们从备份中恢复了网站。这就是为什么我们在这个主菜单上面临一些问题。这些链接是网站的实时链接，因此您也可以访问和查看实时网站。

请有人帮忙修复菜单。我已经研究了 CSS，我们只是在恢复网站时丢失了一些代码。

Answer 1

您缺少 .sub-menu 的隐藏和显示机制
这是一个简单的示例，将在悬停时显示和隐藏子菜单（我尚未测试这是否适用于多个嵌套元素）。

.navbar-nav.ml-auto.menu_item {
    margin-top: 20px;
}

/*.navbar-nav { 
    overflow: hidden;
}*/

.navbar-nav a {
    text-decoration: none;
    text-align: center;
    padding: 10px 12px;
}

/* START added */

.navbar-nav .menu-item-has-children {
  position: relative;
}

.navbar-nav .menu-item-has-children > .sub-menu {
  display: none;
}

.navbar-nav .menu-item-has-children:hover > .sub-menu {
  display: block;
  z-index: 1;
}

/* END added */

.sub-menu {
  list-style: inherit;
  margin: 0;
  padding-left: 0;
  position: absolute;
  background-color: #ffffff;

}

.sub-menu a {
  padding: 12px 16px;
  text-decoration: none;
  display: inline-block;
  text-align: left;
}

.sub-menu li {
  text-decoration: none;
  display: block;
  text-align: left;
}

.sub-menu li:hover {
  float: none;
  color: black;
  text-decoration: none;
  display: block;
  text-align: left;
}




.navbar-nav a:hover, .sub-menu:hover .sub-menu {
  background-color: #FBAF1B;
}

.menu-main-menu {
    
}

.menu_item a {
    font-size: 18px !important;
    font-weight: 900;
    color: #031229 !important;
    text-transform: uppercase;
    display: inline-block;
}

<div class="navbar-nav ml-auto menu_item">
    <nav class="navbar-nav">
        <div class="menu-main-menu-container">
            <ul id="menu-main-menu" class="menu">
                <li id="menu-item-212" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-212"><a href="https://www.solexcel.com.au/about/">About</a></li>
                <li id="menu-item-3766" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3766"><a href="https://www.solexcel.com.au/service-areas/">Service Areas</a></li>
                <li id="menu-item-4053" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-4053"><a href="#">Products</a>
                    <ul class="sub-menu">
                        <li id="menu-item-4151" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4151"><a href="https://www.solexcel.com.au/panels/">Panels</a></li>
                        <li id="menu-item-4150" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4150"><a href="https://www.solexcel.com.au/inverters/">INVERTERS</a></li>
                        <li id="menu-item-4152" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4152"><a href="https://www.solexcel.com.au/power-saving-unit/">Power Saving Unit</a></li>
                    </ul>
                </li>
                <li id="menu-item-263" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-263"><a href="https://www.solexcel.com.au/blogs/">Blogs</a></li>
                <li id="menu-item-236" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-236"><a href="https://www.solexcel.com.au/est-solar-inverter-in-melbourne-victoria-australia/">Contact</a></li>
            </ul>
        </div>
        <a href="https://www.solexcel.com.au/#quot" class="nav-item1 nav-link get_ww">Get <br>Started</a>
    </nav>
</div>