@ chris-w и @emontielg привели меня к совершенству. Сначала мне нужно установить ширину контейнера, чтобы EDGE мог работать с правильным размером (я полагаю). Так что я удаляю все diplepents diplay (с учетом flexbox), затем просто добавляю "align-self: flex-start;" к первому элементу LI. BOOM MAGI C: D
PS <d>
это то, что WordPress добавляет.
Вот исправленный код JS Fiddle - https://jsfiddle.net/chocoXXL/27bqukzm/)
<header class="box_max flipInX">
<div id="box_logo">
<a href="#"><img src="https://dummyimage.com/87x80/000/fff "></a>
</div>
<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="#">
<d>Inicio</d>
</a>
</li>
<li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-7 current_page_item menu-item-26">
<a href="#" aria-current="page">
<d>Nosotros</d>
</a>
</li>
<li id="menu-item-453" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-453">
<a href="#">
<d>Equipos</d>
</a>
<ul class="sub-menu" style="">
<li id="menu-item-460" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-460">
<a href="#">
<d>Almacenamiento de Alimento</d>
</a>
<ul class="sub-menu" style="display: none;">
<li id="menu-item-468" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-468">
<a href="#">
<d>Silos</d>
</a>
</li>
<li id="menu-item-467" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-467">
<a href="#">
<d>Pesaje y Transporte</d>
</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="#">
<d>Huevos</d>
</a>
<ul class="sub-menu" style="display: none;">
<li id="menu-item-475" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-475">
<a href="#">
<d>Incubación</d>
</a>
</li>
<li id="menu-item-474" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-474">
<a href="#">
<d>Clasificadoras</d>
</a>
</li>
<li id="menu-item-476" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-476">
<a href="#">
<d>Marcadoras</d>
</a>
</li>
</ul>
</li>
<li id="menu-item-461" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-461">
<a href="#">
<d>Crianza</d>
</a>
<ul class="sub-menu" style="display: none;">
<li id="menu-item-1285" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1285">
<a href="#">
<d>Comederos</d>
</a>
</li>
<li id="menu-item-469" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-469">
<a href="#">
<d>Bebederos</d>
</a>
</li>
<li id="menu-item-473" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-473">
<a href="#">
<d>Nidos Automáticos</d>
</a>
</li>
<li id="menu-item-472" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-472">
<a href="#">
<d>Galpones</d>
</a>
</li>
<li id="menu-item-1278" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1278">
<a href="#">
<d>Climatización</d>
</a>
</li>
</ul>
</li>
<li id="menu-item-463" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-463">
<a href="#">
<d>Procesamiento</d>
</a>
<ul class="sub-menu" style="display: none;">
<li id="menu-item-480" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-480">
<a href="#">
<d>Matanza</d>
</a>
</li>
<li id="menu-item-479" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-479">
<a href="#">
<d>Evisceración</d>
</a>
</li>
<li id="menu-item-478" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-478">
<a href="#">
<d>Enfriamiento</d>
</a>
</li>
<li id="menu-item-481" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-481">
<a href="#">
<d>Pesaje y clasificación</d>
</a>
</li>
<li id="menu-item-482" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-482">
<a href="#">
<d>Trozado</d>
</a>
</li>
<li id="menu-item-477" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-477">
<a href="#">
<d>Deshuese</d>
</a>
</li>
</ul>
</li>
<li id="menu-item-464" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-464">
<a href="#">
<d>Rendering</d>
</a>
<ul class="sub-menu" style="display: none;">
<li id="menu-item-489" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-489">
<a href="#">
<d>Transportadores</d>
</a>
</li>
<li id="menu-item-487" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-487">
<a href="#">
<d>Tolvas</d>
</a>
</li>
<li id="menu-item-488" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-488">
<a href="#">
<d>Trituradores</d>
</a>
</li>
</ul>
</li>
<li id="menu-item-563" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-563">
<a href="#">
<d>Tratamiento de Aguas</d>
</a>
</li>
</ul>
</li>
<li id="menu-item-454" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-454">
<a href="#">
<d>Implementos</d>
</a>
<ul class="sub-menu" style="display: none;">
<li id="menu-item-455" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-455">
<a href="#">
<d>Cajas Plásticas</d>
</a>
</li>
<li id="menu-item-456" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-456">
<a href="#">
<d>Paletas Plásticas</d>
</a>
</li>
</ul>
</li>
<li id="menu-item-457" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-457">
<a href="#">
<d>Repuestos</d>
</a>
<ul class="sub-menu" style="display: none;">
<li id="menu-item-459" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-459">
<a href="#">
<d>Remover</d>
</a>
</li>
<li id="menu-item-1345" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1345">
<a href="#">
<d>Troles</d>
</a>
</li>
<li id="menu-item-1343" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1343">
<a href="#">
<d>Cadenas</d>
</a>
</li>
<li id="menu-item-466" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-466">
<a href="#">
<d>Ganchos</d>
</a>
</li>
<li id="menu-item-526" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-526">
<a href="#">
<d>Otros</d>
</a>
</li>
</ul>
</li>
<li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25">
<a href="#">
<d>Noticias</d>
</a>
</li>
<li id="menu-item-24" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-24">
<a href="#">
<d>Contacto</d>
</a>
</li>
</ul>
</div>
</nav>
<div id="le_buscar">
<p>Buscar </p>
<i class="fa fa-search" aria-hidden="true"></i>
</div>
</header>
* {
padding: 0;
margin: 0;
font-family: 'Montserrat', sans-serif;
color: #6f6c69;
}
header {
background-color: #FFF8DC;
}
.box_max {
width: 100%;
max-width: 1080px;
margin: auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
clear: both;
}
header {
display: flex;
justify-content: space-between;
/* flex-wrap: wrap; */
position: relative;
z-index: 99999;
align-items: flex-start;
}
#box_logo a {
display: block;
height: 80px;
margin: 5px;
/* ackground-image: url('../images/logo.png'); */
background-size: 100%;
}
#box_logo a img {
height: 100%;
}
.btn_header_box {
display: flex;
margin: auto 0;
}
#btn_go_search.searching, #btn_no_search.searching {
right: 100%;
}
#btn_go_search, #btn_no_search {
position: relative;
right: 0;
transition: 0.2s all ease-in-out;
-webkit-tap-highlight-color: transparent;
}
#le_burger, #le_lupa {
display: none;
}
button.btn_zoom i {
color: white;
font-size: 1.4em;
}
.menu-le_menu-container {
height: 100%;
width: 100%;
}
#box_out_header {
display: none;
width: 100%;
height: 100%;
position: fixed;
}
nav {
width: 100%;
}
ul.nav_menu {
display: flex;
justify-content: center;
align-items: normal;
height: 100%;
width: 100%;
}
ul.nav_menu>li {
background-color: blue;
list-style: none;
/*display: table;
position: relative;*/
/* width: 100%;*/
align-self: flex-start;
}
ul.nav_menu>li>a {
background-color: red;
margin-top: 22px;
}
ul.sub-menu li {
list-style: none;
/*display: list-item;*/
/*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);
/*overflow-wrap: break-word;*/
/*word-break: keep-all;*/
}
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;
}
#le_buscar {
margin: auto 0;
border: 2px solid rgba(221, 153, 0, 0);
display: flex;
cursor: pointer;
padding: 16px;
box-sizing: border-box;
margin-top: 22px;
}
#le_buscar p {
margin-right: 5px;
}
#le_buscar:hover * {
color: #dd9900;
}
.sub-menu {
position: relative;
}
/*HEELO*/
$(".nav_menu li ul").hide();
$(".nav_menu li ").click(function(e) {
event.preventDefault();
e.stopPropagation();
$(this).children('ul').slideToggle();
if($(this).children('ul').length == 0)
{
$(".nav_menu li ul").hide();
var href = $('a', this).attr('href');
window.location = href;
console.log(href);
}
if ($(this).parents('.active').length) {
$(this).siblings().find('ul').slideUp();
}
else {
//$(this).siblings().children('ul').slideUp();
$(this).siblings().find('ul').slideUp();
}
});
$("#box_logo ").click(function(e) {
event.preventDefault();
e.stopPropagation();
//$('.nav_menu ul').not(this).slideUp();
$('.nav_menu ul').slideUp();
});
$("body ").not(this).click(function(e) {
event.preventDefault();
e.stopPropagation();
//$('.nav_menu ul').not(this).slideUp();
$('.nav_menu ul').slideUp();
});