메뉴들의 마크업을 바꾸고 싶었던 거예요.

php로 상속을 받고 해야 하나 보군요.

(댓글에 코드는 제가 올린 대로가 아니고 저렇게 변경이 되어 올라갔네요)

감사합니다.

아래처럼 나오는건 명백하게, HTML 사용방법이 틀렸습니다.

<div class="<span class="marker"><strong>w3-dropdown-hover</strong></span>">

class 속성 안에는 태그가 들어갈 수 없습니다.

<div class="w3-dropdown-hover"> 이렇게 해주셔야 겠죠.

물론 wp_nav_menu 함수에도 아래처럼 하셔야 겠죠.

<?php wp_nav_menu( array( 
 'container'       => '',
 'theme_location' => 'main_menu',
 'menu_class' => 'main_menu_css'
 ));
?>

메뉴를 커스텀 하시려면 Walker_Nav_Menu 클래스에 대해서 알아보세요.

https://developer.wordpress.org/reference/classes/walker_nav_menu/

보시면 아시겠지만 nav_menu_css_class 필터가 있어서 메뉴마다 클래스를 추가할 수 있도록 되어있습니다.

즉 기본적으로 메뉴마다 각각 다른 class가 추가되거든요.

기본적인 Walker_Nav_Menu 대신 다른걸 등록해서 사용하신건지? 의문입니다.

nav_menu_css_class 필터에 대해서도 알아보세요.

https://codex.wordpress.org/Plugin_API/Filter_Reference/nav_menu_css_class

wp_nav_menu 함수를 안써도 되긴 하지만, 안쓰면 관리적인 측면에서는 불편한게 있을겁니다.

저도 어떤 상황인지 설명드리기가 애매하네요.

다시 정리해보면 w3 css 프레임워크에서 드롭다운 메뉴를 하려면

<div class="a">
 <div class="b">
  <div class="c">
  </div>
 </div>
</div>

형태가 필요합니다.

<div class="w3-dropdown-hover">
  <button class="w3-button">드롭다운버튼</button>
  <div class="w3-dropdown-content w3-bar-block w3-border">
    <a href="#" class="w3-bar-item w3-button">메뉴 1</a>
    <a href="#" class="w3-bar-item w3-button">메뉴 2</a>
    <a href="#" class="w3-bar-item w3-button">메뉴 3</a>
  </div>
</div>

이게 예제고요. ( https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_dropdown_hover )

<div class="w3-dropdown-hover">
<?php wp_nav_menu( array( 
 'container'       => '',
 'theme_location' => 'main_menu',
 'menu_class' => 'main_menu_css w3-button'
 ));
?>
</div>

이런 식으로 header.php에 넣었습니다. 맞는 건 아닌 것 같지만요.. 어떻게든 우겨넣어 보려고요.

일단 w3-dropdown-hover 클래스는 잘 적용 됐지만... 그 이상 무엇도 아니네요.

메뉴1, 메뉴2, 메뉴3에 w3-bar-item 클래스를 지정하는 법도 모르겠고요. w3-button 도 올바른 적용 범위가 아닌 것 같고..

지금 이런 상황입니다.

wp_nav_menu() 를 쓰지 말까 싶기도 하고요. 그러면 워드프레스의 메뉴관리, 페이지관리의 혜택은 못 보게 되겠죠..?

보통은 메뉴 하나하나 별로 아이디와 클래스가 추가되거든요.

그래서 메뉴별로 CSS 속성을 추가할 수 있습니다.

그런데 그렇게 안된다는 거죠?

사이트 주소도 알려주시겠어요?

올려주신 예제에서

메뉴 하나를 선택하려면 :nth-child() 선택자를 사용해보세요.

.w3-bar-item:nth-child(2) { color: red; }