así que tengo un menú desplegable html y quiero convertirlo al menú de wordpress. tengo tres submenús dentro del menú principal, este es mi código:
<ul class="main-menu-links">
<div class="sidebar-logo">
<span class="logo">CodingLab</span>
<i class="fas fa-times close-2"></i>
</div>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Video</a>
<ul class="sub-menu">
<li><a href="#">Sport</a></li>
<li><a href="#">News</a></li>
<li class="li-class"><a href="#">Technonlogy</a>
<ul class="sub-menu-2">
<li><a href="#">sub-menu-2</a></li>
<li><a href="#">sub-menu-2</a>
<ul class="sub-menu-3">
<li><a href="#">sub-menu-3</a></li>
<li><a href="#">sub-menu-3</a></li>
<li><a href="#">sub-menu-3</a></li>
</ul>
</li>
<li><a href="#">sub-menu-2</a></li>
</ul>
</li>
</ul></li>
<li><a href="#">Sport</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Technonlogy</a></li>
</ul>
y el css:
.main-menu-links li:hover .sub-menu{
display: block;
}
.sub-menu{
border-top: 2px solid #0072dd;
position: absolute;
z-index: 999;
display: none;
box-shadow: 0 5px 10px rgb(0 0 0 / 20%);
background: linear-gradient(to right,#001e3b,#171717);
}
.sub-menu li{
width: 180px;
position: relative;
}
.sub-menu ul{
top: 0;
left: 100%;
border-top: 2px solid #0072dd;
position: absolute;
z-index: 1000;
display: none;
box-shadow: 0 5px 10px rgb(0 0 0 / 20%);
background: linear-gradient(to right,#001e3b,#171717);
}
.sub-menu ul li{
width: 180px;
}
.main-menu-links .sub-menu ul li:hover .sub-menu-3{
display: block;
}
.main-menu-links .sub-menu li:hover .sub-menu-2{
display: block;
}
.sub-menu-3{
top: 0;
left: 100%;
border-top: 2px solid #0072dd;
position: absolute;
z-index: 1000;
display: none;
box-shadow: 0 5px 10px rgb(0 0 0 / 20%);
background: linear-gradient(to right,#001e3b,#171717);
}
.sub-menu-3 li{
width: 180px;
}
cuando convierto el código al menú de wordpress:
<?php
wp_nav_menu(
array(
'theme_location' => 'menu-1',
'items_wrap' => '<ul class="main-menu-links">%3$s</ul>',
) );
?>
y el resultado cuando inspecciono la salida de wordpress:
"menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-32"><a href="http://localhost/wordpress/category/tech/">tech</a>
<ul class="sub-menu">
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-81"><a href="#">sub menu</a>
<ul class="sub-menu">
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-82"><a href="#">sub menu 2</a></li>
</ul>
</li>
</ul>
</li>
todos mis submenús con clase de submenú no hay submenú-2 o submenú-3. Quiero solucionar el problema, por favor. la idea es crear varios menús desplegables y diseñar los submenús con clases CSS deffirents.
imagen problema:
eso es lo que quiero :
la solución pero es solo html
.