Как исправить проблему с многоуровневым меню?

Question

[Константин Чамсов]

При создании многоуровневого меню, ни с того ни с сего пропадает видимость пунктов данного подменю. При наведении на один из пунктов данного подменю, именно его видимость возвращается.

<ul class="mainmenu">
         <li id="first_one">Первое
             <ul class="level_menu">
                 <li>Первое</li>
                 <li>Второе</li>
                 <li>Третье</li>
             </ul>
         </li>
         <li>Второе</li>
         <li>Третье</li>
     </ul>

* {
    margin:0;
    padding:0;
    cursor:pointer;
    font-family:helvetica;
}

ul {
    list-style-type: none;
    display:inline;    
}

li {
    padding:10px 10px;
    transition:0.3s;

}

li:hover {
    background:black;
    color:white;
    transition:0.3s;
}


.mainmenu {
    position:relative;
    left:40px;
    display:block;
    width:120px;
    text-align:center;
    margin-top:150px;
    border:2px solid black;
}


.level_menu {
    position:absolute;
    top:-2px;
    left:120px;
    border-right:2px solid black;
    border-top:2px solid black;
    border-bottom:2px solid black;
    visibility:hidden;

}

$(function(){
    $('#first_one').mouseenter(function(){
        $('.level_menu').css({'visibility' : 'visible'});
    });
    $('.level_menu, .mainmenu').mouseleave(function(){
        $('.level_menu').css({'visibility' : 'hidden'});
    });
});

Answer 1

[Артём Ведищев]

Я бы не маялся со скриптом и решил вопрос на CSS

https://jsfiddle.net/m903acuk/

Comments

[Константин Чамсов]

Брат, я бы тоже не маялся. Через стили ни в какую. Пропадают эти подпункты и всё. Я тоже дисплеем фигачил, ни к чему не привело.