하위 메뉴 페이지에서 메뉴 항목의 색상을 변경하십시오.

Question

저는 Starkers 테마를 사용하여 Wordpress에서 사이트를 구축하고 있습니다. 나는 HTML을 사용하여 주 및 하위 탐색 코드를 작성하고 CSS로 스타일을 지정했습니다. 내가해야할 일은 각각의 메인 탐색 링크를 페이지에있을 때 색상을 변경하고 하위 메뉴의 부모가 페이지에있을 때 다른 색상으로 변경하는 것입니다. current-menu-item 및 current-parent-item을 사용해 보았지만 어느 것도 작동하지 않았습니다. 어떤 아이디어 ??? http://page12.com.au/sample.html

내 코드 :

nav ul { 
    list-style: none; 
    font-size: 25px; 
    font-family: 'HelveticaNeuel'; 
    color: rgb(146, 148, 151); 
    } 

nav ul li { 
    display: block; 
    float: left; 
    margin-top: 40px; 
    font-family: 'HelveticaNeuel'; 
    color: rgb(146, 148, 151); 
} 

/*position home, folio, contact */ 

nav ul li.right a { 
    margin-left: 600px; 
} 

nav ul li.left1 a { 
    margin-left: 20px; 
} 

nav ul li.center { 
    margin-left: 40px; 
} 

nav ul li a { 
    text-decoration: none; 
    font-family: 'HelveticaNeuel'; 
    color: rgb(146, 148, 151); 
} 

nav a:hover { 
    color: rgb(164, 130, 46); 
} 

nav ul li ul { 
    display: none; 
    font-size: 15px; 
    padding: 10px; 
    width: 800px; 
} 

nav ul li:hover ul { 
    display: block; 
    position: absolute; 
    /*left: 0;*/ 
} 

nav ul li ul li { 
    padding: 10px; 
} 

/* sub navigation */ 

#sub-nav { 
    width: 960px; 
    height: 35px; 
    text-align: right; 
    padding: 5px 0 0 0; 
    margin-bottom: 20px; 
    font-size: 16px; 
    height: 30px; 
} 

    #sub-nav li { 
     display: inline; 
     margin-left: 10px; 
     margin-right: 10px; 
     position: relative; 
     float: left; 
    } 

    #sub-nav a { 
     text-decoration: none; 
     font-family: 'HelveticaNeuel'; 
     color: rgb(146, 148, 151); 
    } 

    #sub-nav a:active { 
     color: rgb(164, 130, 46); 
    } 

    /*sub menu selected page font colour change */ 
    #sub-nav li.selected a { 
     color: rgb(164, 130, 46); 
    } 

Answer 1

당신은 리 태그를 활성 부모 페이지 클래스 아래 얻을 것이다.

• 현재 메뉴 항목
• 현재 메뉴 조상
• 현재 메뉴 부모
• current_page_parent
• current_page_ancestor

당신이 CSS를 줄 수 ablove 클래스에 따라 그.

#nav { 
    background:#333; 
    border-bottom:1px solid #000; 
} 
#nav ul { 
    float:left; 
    margin:0; 
} 
#nav ul > li { 
    float:left; 
    list-style:none; 
    position:relative; 
} 
#nav li > a { 
    color:#fff; 
    font-size:14px; 
    padding:10px 20px; 
    display:block; 
    text-transform:uppercase; 
} 
#nav li:hover > a , 
#nav li.current-menu-item > a, 
#nav li.current-menu-ancestor > a, 
#nav li.current_page_item > a, 
#nav li.current_page_ancestor > a, 
#nav li.current_page_parent > a { 
    background:#212121; 
    text-decoration:none; 
} 
#nav ul ul { 
    position:absolute; 
    top:36px; 
    left:0; 
    background:#fff; 
    border:1px solid #ccc; 
    border-top:none; 
    padding:7px 0; 
    display:none; 
} 
#nav ul ul ul { 
    left:100%; 
    top:0; 
} 
#nav li li { 
    width:160px; 
} 
#nav li li > a { 
    font-size:12px; 
    color:#7e7e7e; 
    padding:5px 20px; 
} 
#nav li li:hover > a , 
#nav li li.current-menu-item > a, 
#nav li li.current-menu-ancestor > a, 
#nav li li.current_page_item > a, 
#nav li li.current_page_ancestor > a, 
#nav li li.current_page_parent > a { 
    background:#fff; 
    color:#232323; 
} 
#nav li:hover ul { 
    display:block; 
} 

Answer 2

직접 해결했습니다. body.page-id 태그를 사용해야했습니다.