Why hover effect applied to different selector?

  • Resolved Rosa Parker

    (@rosa-bosma)


    9 years, 6 months ago

    If you go to https://rosabosma.com (in mobile view), click on the menu, then hover ‘Work With Me’, and then the submenu items ‘Policies & Procedures’ or ‘FAQ’, you will see an arrow next to ‘FAQ’. It comes from:

    .nav-primary .menu li.menu-item-has-children > a:after {
		content: '';
		display: block;
		border-style: solid;
		border-width: 15px 15px 0;
		border-color: rgba(255, 255, 255, .6) transparent;
		bottom: 20px;
		right: 25px;
		position: absolute;
		width: 0;
		z-index: 1;
	}

    I don’t want the submenu items to display this effect on hover, but I can’t find the right selector to achieve that. The menu item ‘Work With Me’ doesn’t display the arrow effect on hover, whereas the submenu items (‘Policies & Procedures’, ‘FAQ’) only display the arrow effect on hover. It’s kind of a reverse effect and I just can’t see why this is happening.

    This is the code I used for ‘Work With Me’s hover state, so that nothing is visible:

    .nav-primary .menu li.menu-item-has-children > a:hover:after {
		border-color: transparent;
	}

    Any feedback would be appreciated! Thank you very much.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter Rosa Parker

    (@rosa-bosma)

    Silly, but only now I’ve come to the conclusion that the arrow visible when hovering the submenu items isn’t an effect applied to the submenu – it origins from ‘Work With Me’ and just appears in a distorted position. How can I cross-refer to this arrow from the point of a submenu item?

    [ No bumping please. ]

    Try adding this to it

    .nav-primary .menu li.menu-item-has-children > a {
	position: relative;
}

    The problem is this .nav-primary .menu li.menu-item-has-children > a::after is absolute positioned and its closest outer container that has relative position is the .nav-primary .menu li which is the whole thing in the li element.

    So the code above is to assign the position relative to the right container, the arrow now will not appear at the right/bottom of the whole list (which includes submenus), but on the first level li only.

    On a sidenote, I think there is no need to disable the arrow on hover, just leave it on always.

    Thread Starter Rosa Parker

    (@rosa-bosma)

    Thank you!! It worked perfectly. ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Why hover effect applied to different selector?’ is closed to new replies.