Jquery 奇怪的下拉行为

我有一个非常令人困惑的问题，当它显示时，带有类搜索的li被移到下拉框下，所有其他li都留在它们应该在的地方，有什么建议吗

只有当下拉列表显示时，才会出现“搜索”li，并按预期工作

HTML:

Javascript:

$("ul.nav .dropdown").on({
    mouseenter: function () {
        $(this).prev().css('background', '#0F2F54');
    },
    mouseleave: function () {
        $(this).prev().css('background', '');
    }
});

---

将下拉列表的位置设置为绝对位置；

---

这里有一个代码修复程序，只需将下拉类设置为

绝对值

不会影响页面上的其他元素

---

在css

中。下拉列表

类具有

位置：相对

，这意味着它将自身与其相邻元素相对对齐，将其更改为绝对将使其成为

。下拉列表

根据绝对位置对齐

ul.nav .dropdown {
    position: absolute;
    width: 98%;
    height: 130px;
    margin-top: 38px;
    margin-left: -2%;
    padding: 2%;
    color: #FFFFFF;
    background: #0F2F54;
    opacity: 0.95;
    z-index: 1;
}

---

您的下拉列表

div

位于

li

中，因此它只是

在第二个
div
$("ul.nav .dropdown").on({
    mouseenter: function () {
        $(this).prev().css('background', '#0F2F54');
    },
    mouseleave: function () {
        $(this).prev().css('background', '');
    }
});

ul.nav .dropdown {
    position: absolute;
    width: 98%;
    height: 130px;
    margin-top: 38px;
    margin-left: -2%;
    padding: 2%;
    color: #FFFFFF;
    background: #0F2F54;
    opacity: 0.95;
    z-index: 1;
}