Javascript Html列表项悬停时保持活动状态

我有一个问题要解决。我已经创建了一个电子商务网站的菜单。菜单很好用。不幸的是，我不能在这里复制整个代码，因为它太多了，但我制作了一个简短的版本和一张图片来展示菜单的结构。 主要概念是当在主导航上单击一个按钮时，会打开一个下拉菜单，该菜单有两列。左侧站点有更多按钮，右侧是显示div容器的位置，具体取决于左侧的活动列表项。这就是问题所在。 因为容器是通过悬停在列表项上而不是单击它来打开的。当鼠标位于li上方时，它会高亮显示，但当鼠标离开时，高亮显示颜色将消失。 我希望在鼠标悬停在另一个li项目上之前，保持活动li项目高亮显示。 不知何故，我应该获得悬停的行（项目），将css类更改为高亮显示，并保留，直到另一行悬停。然后删除css类，并对新的活动列表执行相同的操作。 希望我能说清楚。：-） 下面是html代码和结构

<nav class="navbar navbar-default" role="navigation">
    <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav">
        <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="button1"> </a>
        <div class="dropdown-menu">                 

            <div class="col-sm-3">
            <ul class="submenu-list">
                <li><a href="#" class="submenu-list-item" id="item1"> </a></li>
                <li><a href="#" class="submenu-list-item " id="item2"> </a></li>
                <li><a href="#" class="submenu-list-item " id="item3"> </a></li>
            </ul>
            </div> 

            <div class="col-sm-9" id="submenubox1">
                <h3>Subbox Title</h3>
                <div>Content</div>
            </div>

            <div class="col-sm-9" id="submenubox2">
                <h3>Subbox Title</h3>
                <div>Content</div>
            </div>

        </div>
        </li>  
    </ul>
    </div>
</nav>       

但这也不起作用

下面是一个我试图实现的类似例子。

任何帮助都将被占用。

---

谢谢大家!

我多少能理解你的问题。我试过这个插件。它可以满足你的需要。

---

使用jQuery将

活动类添加到悬停的项目中-

$('.submenu-list-item:not(.active)').on('mouseover', function() {
  $(this).parent().find('.submenu-list-item.active').removeClass('active');
  $(this).addClass('active');
});

仅当将鼠标悬停在同一父项（即相同子菜单）的项目上时，才会为所有回复添加
active
类。
在Rohit的帮助下，我成功了

然而，我不得不换一行

$(this).parent().find('.submenu-list-item.active').removeClass('active');

不幸的是，这条线路对我不起作用。
当另一个项目被悬停时，它不会删除突出显示的项目。相反，我从ul中的所有项目（a）中删除了该类

$('.submenu-list-item:not(.active)').on('mouseover', function() {
$(".submenu-list a").removeClass();
$(this).addClass('active');
});

无论如何，谢谢你的引导回答。我将从那里学到一些新东西。
嗨。谢谢半路。：-）由于某种原因，当我将鼠标悬停在li上时，它会高亮显示并保持高亮显示。但问题是，当我停留在另一个li上时，它会突出显示，但最后一个也会保留。由于某种原因，第一个突出显示并没有消失，尽管父级find removeclass应该这样做。@bontoo它完全工作了吗？还是问题依然存在？您能在代码检查器中看到类是否被删除，以及控制台中是否出现任何JS错误吗？
$(this).parent().find('.submenu-list-item.active').removeClass('active');

$('.submenu-list-item:not(.active)').on('mouseover', function() {
$(".submenu-list a").removeClass();
$(this).addClass('active');
});