I’m using SmartMenus for my navigation with drop down menus. For one of the navigation items, I’m working on a custom mega menu (not using SmartMenus mega menu code because I wanted to create a mega menu that goes the full width of the site content and want the mega menu to include columns of ul).
The mega menu has three levels of li. For the ul that is the immediate child of the top level li, I have set a width of 100%. Each of the second level li is floated left so that they line up next to each other in columns.
The issue I’m having is this: when I move my mouse from a second level li (or its children) to the children of a sibling li and then out of the drop down altogether, the “highlighted” class applied by SmartMenus doesn’t get removed and the drop down stays open.
I’m not sure what I need to change to get the “highlighted” class to be removed/the drop down to close when the user has moved their mouse off of it.
Here’s an idea of what my code looks like:
HTML:
<div id=”navbar”>
<div class=”responsive-menu-button”>
<p>Menu</p>
<div class=”hamburger”>
<div class=”top-bun”></div>
<div></div>
<div></div>
</div>
</div>
<ul id=”main-menu” class=”sm”>
Top Level One
<li class=”mm-parent”>Top Level Two
<li id=”mm-one” class=”menusection”>MM One
<li id=”mm-two” class=”menusection”>MM Two
<li id=”mm-three” class=”menusection”>MM Three
<li id=”mm-four” class=”menusection”>MM Four
Top Level Three
Top Level Four
Top Level Five
Top Level Six
Top Level Seven
</div>
CSS:
@media screen and (min-width: 1024px) {
.mm-parent {position: static!important;}
.mm-parent > ul {width: 100% !important; max-width: 100% !important; top: 50px; left: 0; right: 0; margin-left: 0 !important; border: 1px solid #c1c1c0 !important;}
.mm-parent > ul > li ul {display: inline!important; position: static; border: none;}
.sm li.mm-parent ul li {border-bottom: none;}
.sm li.mm-parent > ul > li {height: 292px;}
.sm li ul li a:hover {font-size: 16px; text-transform: none; padding: 8px 11px;}
.menusection {float: left;}
.menuheader {padding: 8px!important; border-bottom: none !important; position: static !important; font-weight: 500; color: white!important; font-size: 19px !important;}
.sm .menusection > a:hover {padding-right: 8px!important; color: white!important; font-size: 19px!important; border-left: none!important;}
.menusubheader {padding: 0px 11px 3px 11px;}
.menusubheader > a {padding-top: 0 !important; font-size: 19px!important; font-weight: 500; color: #7aaab5!important; line-height: 26px!important;}
.menusubheader > a:hover {color: #7aaab5!important; background-color: transparent!important;}
#menuleft {float: left; width: 33.3333%; margin-bottom: 11px;}
#menuright {float: left; width: 66.6666%; border-left: 1px solid #dededd;}
.listleft {float: left; width: 50%;}
.listright {float: left; width: 50%;}
.menusection ul li a {line-height: 18px!important;}
}
Thanks for any thoughts on this issue!
.
