使用下拉菜单使鼠标悬停效果

Question

I would like to improve my HTML part from my Django website and especially my Bootstrap navbar tab . Up to now, I have some dropdown-submenus and I have to click on one tab in order to access to the next menu, then submenu.

I would like to get hover effect in order to point my mouse on the tab and without click, get the menu and submenu.

For example, one of my HTML tab looks like :

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
        <span class="glyphicon glyphicon-book"></span> 
        Tables Annuelles & Décennales 
        <b class="caret"></b>
    </a>

    <ul class="dropdown-menu">
        <li class="dropdown dropdown-submenu">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                <span class="glyphicon glyphicon-file"></span> 
                Edition Tables annuelles
            </a>

            <ul class="dropdown-menu">
                <li><a href="{% url "annuel" %}">Naissances</a></li>
                <li><a href="{% url "BCnotfound" %}">Reconnaissances</a></li>
                <li><a href="{% url "BCnotfound" %}">Mariages</a></li>
                <li><a href="{% url "BCnotfound" %}">Décès</a></li>
            </ul>
        </li>

        <li class="dropdown dropdown-submenu">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
                <span class="glyphicon glyphicon-book"></span> 
                Edition Tables décennales
            </a>

            <ul class="dropdown-menu">
                <li><a href="{% url "BCnotfound" %}">Naissances</a></li>
                <li><a href="{% url "BCnotfound" %}">Reconnaissances</a></li>
                <li><a href="{% url "BCnotfound" %}">Mariages</a></li>
                <li><a href="{% url "BCnotfound" %}">Décès</a></li>
            </ul>
        </li>
    </ul>
</li>

And I have a javascript part which looks like :

    (function($){
        $(document).ready(function(){
            $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
                event.preventDefault(); 
                event.stopPropagation(); 
                $(this).parent().siblings().removeClass('open');
                $(this).parent().toggleClass('open');
            });
        });
    })(jQuery);

Where I have to modify elements in order to get hover effect on my navbar tab ?

Thank you

Answer 1

进行小更改。

$('ul.dropdown-menu [data-toggle=dropdown]').hover(function(event) {

Answer 2

<ul class="dropdown-menu"> --> change to <ul class="navbar-nav">
  <li class="dropdown dropdown-submenu">

After that, you can try below. I hope this will work.

.navbar-nav li.dropdown:hover .dropdown-menu {
    display: block;
}