CSS 미디어 쿼리를 사용하시면 가능합니다.

아래의 코드를 활용해보시겠어요?

@media screen and (max-width: 600px) {
	/* 이곳에 코드를 추가해보세요. */
}

고맙습니다.

설명해주신 CSS 코드로 적용했더니 색상이 바뀌는걸 확인했는데

#topmenu .sitenav ul li.current_page_item a { color: black !important; }  이걸 적용하니깐

모바일 뿐만아니라 PC 에서도 변경되는것 같아요ㅠㅜ

pc에서는 흰색, 모바일에서는 검정색이 가능할까요??

모바일 기기는 마우스가 아닌 터치로 컨트롤하기 때문에

PC와는 다르게 한 번 터치 시 마우스 오버 효과가 발생합니다.

그렇기 때문에 PC 화면을 줄여서 모바일 레이아웃을 확인하는 것과

실제 모바일에서 표시되는 건 다를 수 있습니다.

아래의 CSS 코드를 활용해보시겠어요?

#topmenu .sitenav ul li.current_page_item a { color: black !important; }
#topmenu .sitenav ul li.current_page_item a:hover { color: #ffffff !important; background: black; }
.sitenav ul li a:hover { background: black; }

위의 코드를 적용하시면 PC 화면을 줄여서 모바일 레이아웃을 확일할 땐

마우스를 메뉴에 올렸을 때 메뉴 색상 및 배경 색상이 바뀝니다.

모바일에서는 터치 이벤트 발생 시에 위의 코드가 적용됩니다.

고맙습니다.