Html list item keep active on hover

Question

I am having an issue which i would like to solve. i have created a menu for an ecommerce site. The menu works fine. Unfortunately i cannot copy the whole code here cos it is too much but i made a short version and a picture to present the structure of the menu. The main concept is when a button is clicked on the main nav a dropdown menu opens which has 2 columns. The left site has further buttons and the right side is where the div containers will be shown depending on the active list item on the left side. That is where the issue occours. Because the container opens by hovering on the list item not by clicking it. When the mouse is over the li it gets highlighted but when the mouse is out the highlight color disappears. I would like to keep the active li item highlighted until the mouse hovers on another li item. Somehow i should get the row(item) which is hovered, change the css class for highlighted and keep until another row gets hovered. Then remove the css class and do the same with the new active list. Hope i mad it clear. :-) here are the html codes and the structure.

<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>       

The code im trying is the following using the menu.aim javascript:

<script src="jquery.menu-aim.js" type="text/javascript"></script>
<script>

        var $menu = $(".dropdown-menu");
        $menu.menuAim({
            activate: activateSubmenu,
            deactivate: deactivateSubmenu
        });

        function activateSubmenu(row) {
            var $row = $(row);
            // Keep the currently activated row's highlighted look
            $row.find("a").addClass("maintainHover");
        }

        function deactivateSubmenu(row) {
            //remove the row's highlighted look
            $row.find("a").removeClass("maintainHover");
        }
</script>

however this code is not working. Im am not sure if this would be the right way to solve this thought. Also i have tried to use to css code:

ul.class li:hover{
background-color: red !important;
}

But this is not working either.

Here is a similar example what iam trying to achieve. https://rawgit.com/kamens/jQuery-menu-aim/master/example/example.html

Any help would be appropriated. Thank you!

Answer 1

Somewhat I can understand your question. I have tried this plugin. It may satisfy your need. Bootstrap Submenu

Answer 2

Use jQuery to add an active class to the hovered item -

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

This will add active class only when hovered over items of the same parent ie same submenu

Answer 3

Thanx for all replies. With the help of Rohit answer I made it work.

However I had to change a line.

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

this line was not working for me unfortunatelly. It did not remove the highlighted item once another got hovered on. Instead of this I removed the class from all items(a) in the ul.

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

Anyway thanks for the bootstrap answer as well. I will learn some new stuffs from there.