CODEWITHSUNDEEP
csscss-selectors
user2116516
user2116516

Reputation: 139

CSS menu triangle not working

I need some CSS help. There are two things I would like to achieve, but I've so far been unsuccessful. Link to Site: http://hn.k12.oh.us/testsite/district/

When I hover over the horizontal menu (primary menu) items I want a triangle to appear. I've achieved this in the vertical menu, but cannot get it to display in the horizontal menu. I'd like it to be similar to what's going on with the vertical menu.

I'm using the following code.

#primary-menu > ul > li:hover:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #f7df2b;
  margin-left: -10px;
}

I'd like the triangle to display on the currently active menu item. I can't get this to work for either the horizontal or vertical menu.

I've tried what's above with the following css:

#primary-menu > ul > li.active a {

Upvotes: 1

Views: 360

Answers (1)

isherwood
isherwood

Reputation: 61063

#primary-menu > ul > li:hover:after {

should be 

#primary-menu ul > li:hover:after,
#primary-menu ul > li.current_page_item:after { ...

or 

#primary-menu-menu > ul > li:hover:after,
#primary-menu-menu > ul > li.current_page_item:after { ...

You have incorrectly specified a parent/child relationship.

Upvotes: 1

Related Questions