워드프레스 사이트 사이드메뉴 CSS 커스텀하기

워드프레스 사이트 사이드메뉴 CSS 커스텀하기

WordPress-side-menu-custom-made (워드프레스 기본 사이트 메뉴 CSS 커스텀하기)

※ 참고이미지

아래 css 코드 수정을 통해 위의 이미지와 같게 변경가능하다.  이를 활용한다면 추가적인 커스텀에 도움이 될 것으로 생각됩니다.

/*사이드메뉴공통옵션*/
ul.nested_nav li a{
  color:blue !important;
  background: #b8d8f1;
  padding:0px 20px;
}
ul.nested_nav li a:hover{
  color:#e0e0e0 !important;
  background:#99b6ce;
}

/*하위메뉴사이드메뉴공통옵션*/
ul.nested_nav li.current_page_ancestor.current_page_parent a {
    color: black !important;
}
ul.nested_nav li.current_page_ancestor.current_page_parent ul.children li a {
    color: grey !important;
}
ul.nested_nav li.page_item.current_page_ancestor.current_page_parent ul.children li a{	
  background:white;
  text-decoration:none !important;
}
/*하위메뉴사이드메뉴활성화옵션*/
ul.nested_nav li ul.children li.page_item.current_page_item a{
  color:white !important;
  background:blue !important;
}
/*사이드하위메뉴패딩공통옵션*/
ul.children{
  padding:0px !important;
}
/*사이드메뉴패딩값공통옵션*/
ul.nested_nav li a{
  padding:10px !important;
}
/*사이드하위메뉴before값*/
ul.children li:before{
  display:none;
}
/*사이드하위메뉴패딩옵션*/
ul.children li a{	
  padding: 5px 15px !important;
}