Custom mega menu with ul columns gets stuck open

Home Forums Latest release 1.1.x Custom mega menu with ul columns gets stuck open

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #3810
    katieTBA
    Participant

    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!

#3811
katieTBA
Participant

EDIT: I reviewed the nav again and actually I think the issue 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 display:block that is being applied by SmartMenus JS to the ul that is the immediate child of the top level li doesn’t get removed and the drop down stays open. If anyone has any thoughts on how to change this, I would appreciate your thoughts.

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.

Register

You will be emailed a link to set your password.

Login

Lost password?