Change Behavior and Positioning of sub-menu

  • I am working on a child theme and would like to do the following:

    1. Make second level sub-menu items display when the top level parent is hovered over. In other words, both the child, and the grandchild will show when the top level nav is hovered over.

    2. Display the second level (grandchild) sub-menu as a normal nested list underneath the first level (child) sub-menu. Basically display it how a browser would be default, as opposed to as a flyout item directly to the left.

    Ultimately I am looking to remove the default styling and hover behavior for that second level – would just like to show them as nested list items underneath their parent. I’m having the hardest time figuring out how to do this.

    Thanks in advance for any help you can provide!

Viewing 2 replies - 1 through 2 (of 2 total)

  • Try adding this CSS to the end of your child theme’s style.css file:

    li.menu-item-has-children:hover ul,
li.menu-item-has-children:hover ul ul {
   display: block;
   clip: inherit;
   overflow: inherit;
   height: inherit;
   width: inherit;
   left: inherit;
   top: inherit;
   border: 0;
   position: relative;
}

li.menu-item-has-children:hover .sub-menu li {
   display: block;
}

/* Make menu items float over content */
li.menu-item-has-children:hover ul,
.nav-menu > li > .sub-menu {
   position: absolute;
}

/* Indent 2nd level menu items */
.nav-menu ul ul li {
   padding-left: 20px;
}

/* Need to set background of hovered menu list items */
ul.nav-menu ul li:hover,
.nav-menu ul ul li:hover {
   background-color: #db572f;
}

    Thread Starter markboulder

    (@markboulder)

    That was very helpful! Thanks so much!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Change Behavior and Positioning of sub-menu’ is closed to new replies.