CSS 메뉴 삼각형이 작동하지 않습니다.

Question

CSS 도움말이 필요합니다. 달성하고 싶은 두 가지가 있지만 지금까지 성공하지 못했습니다. 사이트 링크 : http://hn.k12.oh.us/testsite/district/

수평 메뉴 (기본 메뉴) 항목 위에 마우스를 가져 가면 삼각형이 표시됩니다. 수직 메뉴에서이 작업을 수행했지만 수평 메뉴에 표시 할 수는 없습니다. 수직 메뉴로 진행되는 것과 유사하길 바랍니다.

다음 코드를 사용하고 있습니다.

#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; 
} 

현재 활성화 된 메뉴 항목에 삼각형을 표시하고 싶습니다. 수평 또는 수직 메뉴에서이 기능을 사용할 수 없습니다.

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

Answer 1

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

당신은 잘못 부모/자식을 지정한

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

또는

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

해야한다 :

나는 다음과 같은 CSS를 위에서 무엇을 시도했습니다 관계.