Stroke Disappears On Parent Button Once Cursor Hovers Over A Sub-Item

I am trying to modify the main menu navigation for this site (http://toddtemple.com). The buttons when hovered over have a red stroke on the top with a small downward facing triangle. Everything is good so far. But when I have a button with a dropdown menu (or sub-items) the red stroke disappears when you move your mouse cursor over one of the dropdown buttons.

How can I keep the red stroke and ensure that it will stay visible even when the cursor is hovering over one of the sub-items?

There is n o way to call parent element in CSS3. So as far as it is only HTML CSS & JS page you might try this https://github.com/Idered/cssParentSelector

Hi Todd,

You don’t need js you can do it like this :


#menu-main-menu > li:hover > a:after {
    color: #B00412;
    content: "";
    font: 10px/1 Genericons;
    position: absolute;
    right: 48%;
    top: 2px;
    vertical-align: text-bottom;
}
#menu-main-menu > li:hover > a {
    background-color: #333333;
    border-top: 2px solid #B00412;
    color: #FFFFFF;
}

While the list is hovered you target the top level anchor and not when the anchor is hovered. This will keep the top level active while you traverse the dropdown :slight_smile: