Элементы списка с гибкой работой редко встречаются в Microsoft Edge - PullRequest
0 голосов
/ 28 февраля 2020

У меня есть меню с функцией переключения (js). Дело в том, что на chrome работает нормально, но на MEdge это все равно что не уважать родительскую ширину. Я пытаюсь показать: таблица; или inline-table, также overflow-wrap: break-word; Но ничего не работает T_T

chrome все нормально; enter image description here

край не; enter image description here

Я заново создал его здесь JS Fiddle - https://jsfiddle.net/chocoXXL/9Lz1sb72

$(".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();
    }
});
* {
    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;
}
#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%;
}
#box_out_header {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
}
ul.nav_menu {
    display: flex;
    justify-content: center;
    align-items: normal;
    height: 100%;
}
ul.nav_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;
}
ul.nav_menu li a:hover {
    color: #dd9900;
}
ul.nav_menu>li {
    background-color: blue;
    display: table;
}
ul.nav_menu>li>a {
    background-color: red;
    margin-top: 22px;
}
.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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

Ответы [ 2 ]

0 голосов
/ 28 февраля 2020

@ 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();
});
0 голосов
/ 28 февраля 2020

Я попытался проверить ваш код и провел тест с помощью Microsoft Edge 44.18362.1.0 .

. Я вижу проблему в браузере MS Edge.

Я обнаружил, что если мы удалим приведенный ниже код CSS, тогда проблема будет решена.

ul.nav_menu>li {
    background-color: blue;
    display: table;
}

См. Результат:

enter image description here

Кроме того, вы можете попытаться изменить свой код в соответствии с вашими требованиями.

...