当我尝试将列表悬停时，下拉菜单消失

Question

我的下拉菜单有问题。我尝试了不同的解决方案，但似乎没有一个有效。我正在使用SCSS，将鼠标悬停在汉堡菜单上后，我的下拉菜单必须保持活动状态。

发生的事情是，每当我将其悬停时，将鼠标移出div后它就会消失。 这是我的代码：

    .burger {
    cursor: pointer;
    color: white;
    position: relative;
    &:before{
        font-family: "Font Awesome 5 Free"; 
        font-weight: 900; 
        content: "\f0c9";
        margin-right: .2rem;
    }
    &:after{
        content: 'Menu';
        text-transform: uppercase;
    }
    &:hover .dropdown, .dropdown:hover {
        display: block;
        z-index: 99;
    }
}
.dropdown {
    display: none;
    position: absolute;
    width: 150px;
    top: calc(5vh - 1px);
    right: -10vw;
    background: black;

}

这是我的模板，使用Pug.js模板引擎：

            ul.mobile 
            div.burger
                div.dropdown
                    ul
                        each item in navigation
                            li
                                i(class=item.icon)
                                a(href=item.link)= item.name

非常感谢您的帮助！

https://codepen.io/makkoyev/pen/abojxvG