Le_nu_menu

by Manuel Castro

HTML

<nav id="site-navigation" class="main-navigation" role="navigation">
                        <div class="menu-le_menu-container"><ul id="menu-le_menu" class="nav_menu"><li id="menu-item-27" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-27"><a href="http://nu-maq.com/web2">Inicio</a></li>
<li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26"><a href="http://nu-maq.com/web2/nosotros/">Nosotros</a></li>
<li id="menu-item-453" class="menu-item menu-item-type-taxonomy menu-item-object-category current-category-ancestor current-menu-ancestor menu-item-has-children menu-item-453"><a href="http://nu-maq.com/web2/category/equipos/">Equipos</a>
<ul class="sub-menu">
	<li id="menu-item-460" class="menu-item menu-item-type-taxonomy menu-item-object-category current-category-ancestor current-menu-ancestor current-menu-parent current-category-parent menu-item-has-children menu-item-460"><a href="http://nu-maq.com/web2/category/equipos/almacenamiento-de-alimento/">Almacenamiento de Alimento</a>
	<ul class="sub-menu">
		<li id="menu-item-468" class="menu-item menu-item-type-taxonomy menu-item-object-category current-menu-item menu-item-468"><a href="http://nu-maq.com/web2/category/equipos/almacenamiento-de-alimento/silos/">Silos</a></li>
		<li id="menu-item-467" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-467"><a href="http://nu-maq.com/web2/category/equipos/almacenamiento-de-alimento/pesaje-y-transporte/">Pesaje y Transporte</a></li>
	</ul>
</li>
	<li id="menu-item-462" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-462"><a href="http://nu-maq.com/web2/category/equipos/huevos/">Huevos</a>
	<ul class="sub-menu">
		<li id="menu-item-475" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-475"><a...

CSS

*{padding:0;margin:0;}
ul.nav_menu {
    display: flex;
    justify-content: center;
    align-items: normal;
    height: 100%;
}
ul.nav_menu>li>a {
    /* background-color: red; */
    margin-top: 18px;
}
ul.nav_menu li {
    list-style: none;
    display: table;
    width: 100%;
}

ul.nav_menu li a {
    text-align: center;
    padding: 16px;
    display: block;
    text-decoration: none;
    color: #4a443f;
    /*font-weight: 500;*/
    transition: 0.2s all cubic-bezier(0.8, 0.2, 0.57, 1.01);
    border: 2px solid rgba(221, 153, 0, 0);
}
ul.nav_menu li a:hover {
    color: #dd9900;
}


.nav_menu li li a {
    background-color: #eae8e6;
}
.nav_menu li li li a {
    background-color: #dad2cd;
}
.nav_menu li li li li a {
    background-color: #cabeb4;
}
.nav_menu li li li li li a {
    background-color: #bfae9f;
}
.nav_menu li li li li li li a {
    background-color: #b9a089;
}
.nav_menu li li li li a:hover {
    color: white;
}
.nav_menu li li li li li a:hover {
    color: white;
}
.nav_menu li li li li li li a:hover {
    color: white;
}

JavaScript

$(".nav_menu li ul").hide();
 
 $(".nav_menu li ").click(function() {
        $(this).children('ul').slideToggle(400);
 });
 
 $('.nav_menu li li').hover(
        function() {
             //console.log('hover over');
             $(this).find('>ul').slideDown();
        },
        function() {
             //console.log('hover out');
              $(this).find('>ul').slideUp();
    });