CODEWITHSUNDEEP
cssdrop-down-menumenu
Jeremi Liwanag
Jeremi Liwanag

Reputation: 964

Remove the Triangle CSS effect in Submenus

Hi i added this on my nav menu CSS. It will add a triangle effect on the bottom of my menus. The problem is that, it has added it on the sub menus too.. 

.nav-menu li a:hover:after {
content: "";
display: block;
border: 10px solid #000;
border-bottom-color: #48c5f2;
position: absolute;
bottom: 0px;
left: 50%;
margin-left: -12px;
}

How can i remove the triangle effect in my submenus? I'm guessing i should put something like this?

.nav-menu li li a:hover:after { SOME CODES I DONT KNOW SO IT WILL REMOVE THE TRIANGLE; }

Upvotes: 1

Views: 474

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 240898

If you want to overwrite it, use:

.nav-menu li li a:hover:after {
    content:none;
}

If that's the correct selector, it will work assuming it is more specific, and it is placed after the initial declaration..

Alternatively, if you don't like that approach, you could just prevented it from being applied to the children by using the child selector > on the initial declaration:

.nav-menu > li a:hover:after {}

Basically, this is applying the initial styling to the li element who is a direct child of .nav-menu. Thus, the children elements, (.nav-menu li li) won't receive the styling, and thus won't have to be reset.

Aside from that, there is also always the :not selector.

Upvotes: 1

Related Questions