[Resolved] Green line flashing when I hover over navigation items

[Andrew]

Hello,

I just noticed a green line flashes in my header when I hover over a navigation menu item and then move the cursor off that item. In the past, I had a small green line appear beneath each menu item on hover. But since I added sub menu items (drop down), I believe I removed that. It seems like there’s some CSS there that shouldn’t be there, but I’m not sure what it is.

Details in the private section.

Thank you!

[Andrew]

I believe it has something to do with this CSS, which I used to put a border around the submenu drop down box. When I change the “border:1px” to “3px”, the border AND the green line get thicker. Not sure why the green line is showing though. I appreciate your help!

@media (min-width: 769px) {
nav .main-nav .mega-menu {
position: static;
}
.main-navigation .sub-menu {
border: 1px solid #16a286
}
.main-navigation .sub-menu > li:not(:last-child) > a {
border-bottom: 1px solid #d7d8d9;
}
.main-navigation .sub-menu > li > a {
margin-left: 10px;
margin-right: 10px;
}

[Ying]

Hi Andrew,

The CSS is for creating a simple mega menu, as you are not using mega menu now, you can safely remove this CSS and fix the line issue.

[Andrew]

Which part of the CSS should I remove? If I remove all of it, I lose the styling around the drop downs/sub menu items.

[Ying]

Remove

nav .main-nav .mega-menu {
    position: static;
}

change:

.main-navigation .sub-menu {
    border: 1px solid #16a286;
}

to

.main-navigation ul li:hover ul.sub-menu {
    border: 1px solid #16a286;
}

[Andrew]

That worked, thank you so much!

[Ying]

No problem 🙂

[Author]

Posts