Child Navigation items disappearing when getting to third tier

[andrews1]

Hey there.

Just implemented a new navigation menu on the site: https://www.primohealthcoach.com but some of the menu items are not easy to get to because there is some space that exists between the 2nd tier and 3rd tier items (see image). This causes the hover effect to fail because when trying to put your mouse on the 3rd tier items, you end up not hovering on the 2nd tier items. Wondering if there is a way to extend the box that holds the 2nd tier items OR reduce the spacing between these menu items. See below image for current CSS for primary nav menu.

------------------------------------------------------

.primary-navigation {
font-weight: 600;

}
ul.hs-menu-children-wrapper {padding: 0px 0!important;}
.primary-navigation ul {
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 55px 0 25px 0;
}

.primary-navigation ul li {
margin: 0;
line-height: 1em;
}

.primary-navigation ul li a {
color: #252c59;
}

.primary-navigation ul li a:hover, .primary-navigation ul li a:active {
color: #99bd66 !important;
-webkit-transition: color 0.25s ease-in-out;
-moz-transition: color 0.25s ease-in-out;
-o-transition: color 0.25s ease-in-out;
transition: color 0.25s ease-in-out;
}

.primary-navigation ul li a:visited {
color: #252c59;
}

.primary-navigation li ul {
background: #e6e7e8;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-o-border-radius: 6px;
-khtml-border-radius: 6px;
border-radius: 6px;
letter-spacing: normal;
font-weight: normal !important;
text-transform: none;
}

.primary-navigation li ul li {
line-height: 1em;
}

.primary-navigation li ul li a {
width: auto !important;
max-width: 100% !important;
}

----------------------------------------------------

Thank you!

[Gonzalo]

Hey @andrews1,

Seems like you already fix it with CSS.

But on my side the third menu was overlaping the end of the second level so I suggest to add a bit more space. For that I would suggest change the left property to initial and use the right property instead for positioning with a percent.

.hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-item-has-children ul.hs-menu-children-wrapper li.hs-item-has-children ul.hs-menu-children-wrapper {
    right: -90%;
    left: initial;
    top: 0;
}