Problema con menu multinivel/desplegable

[shacaxD]

Hola compañeros, tengo una plantilla que he desarrollado en html, la estoy adaptando a wordpress, pero me surgió un problema en la parte del menu desplegable.

En mi plantilla html, tengo un menu que en algunos campos al dar clic muestra un submenu, con la ayuda jquery he echo que al dar clic en el campo que tiene el submenu no cargue nada y solo aparezca el submenu, luego los campos del submenu si pueden ser linkeables.

En wordpress el menu funciona con <?php wp_nav_menu ?> y se puede personalizar un poco, lo he echo pero necesito personalizar mas, explico mas al detalle:

El menú es de la siguiente manera:

Código:

<div class="container">
            <ul class="mainMenu">
               <li class="subMenu">
                  <a href="#">Inicio</a> 
                  <ul>
                     <li><a href="pagina1.html">Link</a></li>
                     <li><a href="pagina2.html">Link</a></li>
                  </ul>
               </li>
               <li><a href="pagina3.html">About</a></li>
             </ul>
<div>

Como se dan cuenta el ul mainMenu tiene 2 campos li, uno solo tiene un enlace y otro tiene el submenu.

En wordpress poniendo esto:

Código:

<?php wp_nav_menu( array( 'menu_class'      => 'mainMenu', 'container' => false,   ) ); ?>

Con ese código le digo a wordpress que no tendrá un div container, gracias a ello se pasará de frente a ul, y a su vez el ul se llamará mainMenu. Todo bien hasta allí, pero luego de ponerl <ul class="mainMenu"> necesito poner la clase subMenu al primer li, y solo al primero, como ven al segundo no, solo al primero.

Es allí mi problema, ya que no encuentro la forma de hacerlo, intente agregando este código a function.php

Código:

function my_nav_menu_css_class( $class ) {
 
    /*
    $class = array(4) {
        [1]=> string(9) "menu-item"
        [2]=> string(24) "menu-item-type-post_type"
        [3]=> string(21) "menu-item-object-{type}"
        [4]=> string(11) "menu-item-4"
    }
    */
    
    return array( $class[1], 'subMenu' );
 
}
 
add_filter( 'nav_menu_css_class', 'my_nav_menu_css_class' );

Con eso logro poner la clase subMenu al <li> pero también lo pone a las otras etiquetas que envuelte el primero <li> que son otro <ul> y otro <li>. Y yo solo quiero que la clase se ponga en el primer <li>.

Ejecutando ese código me queda así:

Código:

<ul id="menu-menu-1" class="mainMenu"><li id="menu-item-6" class="menu-item subMenu"><a href="#">Inicio</a>
<ul>
	<li id="menu-item-8" class="menu-item subMenu"><a href="http://www.google.com">Submenuchicho</a></li>
</ul>
</li>
<li id="menu-item-7" class="menu-item subMenu"><a href="http://localhost/?page_id=2">Página de ejemplo</a></li>
</ul>

Y yo quiero que solo quede así:

Código:

            <ul id="menu-menu-1" class="mainMenu"><li id="menu-item-6" class="menu-item subMenu"><a href="#">Inicio</a>
<ul>
	<li id="menu-item-8"><a href="http://www.google.com">Submenuchicho</a></li>
</ul>
</li>
<li id="menu-item-7"><a href="http://localhost/?page_id=2">Página de ejemplo</a></li>
</ul>

Los ID los ignoro, espero me puedan ayudar.

[ArturoGallegos]

alguna razón en especial para necesitar aplicar esa clase CSS?

no puedes usar selectores adyacentes?

[shacaxD]

Mi compañero escribio un js que hace que a los <li> que tengan la clase "subMenu" no se les pueda linkear y solo sirvan para abrir un submenu en caso lo tengan.

Entonces si todo tendrá esa clase, no podré linkear nada.

[laura_moreno14]

Creo que a lo que arturo se refiere es que puedes simplemente utilizar li.submenu ul li:first-child o li .submenu ul + li en el css o desde jquery, no teniendo asi que añadir mas clases a tu me.