Question

How to convert this :

<ul class="ulStyle">
<li class="liStyle">
<div class="first">
<div class="second">
menu1
</div>
</div>
</li>
</ul>

to wp_nav_menu

Too many div and class inside there, anyone can help me solve this problem?Thank you!

Answer 1

This can be accomplished using the nth-child() selector in css

see the codepen here

use this css:

.wp_nav_menu div:nth-child(1) {

  background: blue;

}

.wp_nav_menu div:nth-child(2) {

  background: red;

}

with the following markup:

<ul class="wp_nav_menu">
  <li>
    <div>
      Foo
    </div>
    <div>
      Bar
    </div>  
  </li>
</ul>