I am using the dropdown menu in a WordPress website with CSS/HTML but it is not working properly. I have tried for hours but it still looks broken.
.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>It was working fine before but suddenly we restore the website from a backup. This is why we are facing some issues with this main menu. The links are live to the website so you can visit and check the live website as well.
Please, someone, help in fixing the menu. I have tucked into CSS where we just lose some codes while restoring the website.
CodePudding user response：
You are missing hiding and showing mechanism of your .sub-menu
Here is simple example that will show and hide submenu on hover (I have not tested if this will work on multiple nested elements).
.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>