How to add active marker on menu [#2134363]

I'm trying to add a triangle on the "active" element on the menu. I've added this css:

.navbar .active::after {
	content: "";
	position: absolute;
	bottom: -16px;

	border-width: 0px 15px 15px;
	border-style: solid;
	border-color: #ffffff transparent;
	display: block;
	width: 0;
}

But for some reason I'm getting 2 triangles slightly ontop of eachother on active elements as per attached screenshot. I don't know how else to get it right....please help?

Comment	File	Size	Author
	Screen Shot 2013-11-12 at 9.20.51 PM.png	10.82 KB	hmartens

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

andregriffin CreditAttribution: andregriffin commented 12 November 2013 at 21:06

It's probably because there are two nested elements, both with the .active class, such as the li and the a tag. You need to be more specific on which one you are applying CSS to. you should probably use .navbar > .active:after or .navbar a.active:after or .navbar li.active:after.