@Konstantin007
Изучаю вёрстку и Джаваскрипт

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

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

5da0ce1a5bd4e841892633.jpeg

<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'});
    });
});
  • Вопрос задан
  • 76 просмотров
Пригласить эксперта
Ответы на вопрос 1
Я бы не маялся со скриптом и решил вопрос на CSS

https://jsfiddle.net/m903acuk/
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы