By default bootstrap drop down opens on click and parent item link don’t work anymore as the parent item simply used for triggering drop-download. But the following js code will help you to open drop down on hover and also will activate the link with parent menu item.

<script>
jQuery(function($) {
    if($(window).width()>769){
        $('.navbar .dropdown').hover(function() {
            $(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();

        }, function() {
            $(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp();

        });

        $('.navbar .dropdown > a').click(function(){
            location.href = this.href;
        });

    }
});
</script>

or you can use following CSS:

<style>
@media only screen and (min-width:769px) {
.dropdown:hover .dropdown-menu {
    display: block;
}
.dropdown-submenu {
    position: relative !important;
}

.dropdown-submenu>.dropdown-menu {
    top: 0 !important;
    left: 100% !important;
    margin-top: -6px !important;
    margin-left: -1px !important;
    border-radius: 0 !important;
}

.dropdown-submenu:hover>.dropdown-menu {
    display: block !important;
}

.dropdown-submenu>a:after {
    display: block;
    content: "\f105";
    font-family: 'FontAwesome';
    margin-top: -18px;
    right: 15px;
    position: absolute;
    font-weight: 300;
}
}
</style>

Post Tags


About The Author


Discussion

Leave a Reply

Your email address will not be published. Required fields are marked *

home