我正在使用带有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，我们只是在恢复网站时丢失了一些代码。
您缺少.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>