CSS исправить для IE на menù с flex

Question

Может кто-нибудь помочь мне исправить это меню на IE11, которое работает без проблем на Chrome?

jsfiddle

$(".menu > ul > li").hover(function (e) {
        $(this).children("ul").stop(true, false).fadeToggle(150);
        if ($(this).children("ul").css('display') == "block") { $(this).children("ul").css('display', 'flex'); }
        e.preventDefault();
});

`

Answer 1

Я не могу поставить фиксированный размер.он должен адаптироваться к числу элементов.

Я решил это, установив в скрипте значение hover

$(".menu > ul > li").hover(function (e) {
        $(this).children("ul").stop(true, false).fadeToggle(150);
        if ($(this).children("ul").css('display') == "block") { 
            $(this).children("ul").css('display', 'flex'); 
          $(this).children("ul").width(160*$(this).children("ul").children().length);
        }
        e.preventDefault();
});

Answer 2

Попробуйте добавить свойство width для внутреннего контейнера ul.

Измените следующий код:

            .menu > ul > li > ul {
                position: absolute;
                z-index: 99;
                display: none;
                top: 106%;
                z-index: 1000;
                padding: 5px 0;
                font-size: 14px;
                text-align: left;
                list-style: none;
                background-color: #fff;
                -webkit-background-clip: padding-box;
                background-clip: padding-box;
                -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
                box-shadow: 0 6px 12px rgba(0,0,0,.175);
                right: -10px;
            }

to (добавить свойство width):

            .menu > ul > li > ul {
                position: absolute;
                z-index: 99;
                display: none;
                top: 106%;
                z-index: 1000;
                padding: 5px 0;
                font-size: 14px;
                text-align: left;
                list-style: none;
                background-color: #fff;
                -webkit-background-clip: padding-box;
                background-clip: padding-box;
                -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
                box-shadow: 0 6px 12px rgba(0,0,0,.175);
                right: -10px;
                width:500px;
            }

Результат в браузере IE, как показано ниже: