Active Dropdown Button on hover

Question

I use this method to get slide down menu (find here: Adding a slide effect to bootstrap dropdown) and modify for use on hover action.

@media (min-width: 768px) {

.dropdown .dropdown-menu {
    -webkit-transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0.3s;
    -moz-transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0.3s;
    -ms-transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0.3s;
    -o-transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0.3s;
    transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0.3s;

    max-height: 0;
    display: block;
    overflow: hidden;
    opacity: 1;
    visibility: hidden;

    min-width: 170px;
}

.dropdown:hover .dropdown-menu {
    -webkit-transition: max-height 0.3s, opacity 0.2s, visibility 0s;
    -moz-transition: max-height 0.3s, opacity 0.2s, visibility 0s;
    -ms-transition: max-height 0.3s, opacity 0.2s, visibility 0s;
    -o-transition: max-height 0.3s, opacity 0.2s, visibility 0s;
    transition: max-height 0.3s, opacity 0.2s, visibility 0s;

    max-height: 250px;
    opacity: 1;
    visibility: visible;
}

}

It's work great for mobile and Tab/Laptop/PC but I would like to force active Dropdown button on hover. A little smaple:

What I want and how it's look now

For this button I use this code:

.navbar-default .navbar-nav > .open > a, /*GALERIA button*/
.navbar-default .navbar-nav > .open > a:hover, 
.navbar-default .navbar-nav > .open > a:focus {
    background-color: #155670;
    border-radius: 5px;
    color: white;
    border: 1px solid #87cde8;

}

I was trying to use this code for get effect what I would like to have:

.navbar-nav > li.dropdown:hover { background-color: gray ; }

.dropdown:hover { background-color: #3e8e41;}

It's work for add background color but this is not what I want. I want to get active Dropdown button on hover just like when you click on it.

So I was thinking about some JQ script inside in script tag. I found something HERE.

    $('.dropdown').hover(function(){ 
  $('.dropdown-toggle', this).trigger('click'); 
});

But the problem is on mobile view because I need to click twice to open my Dropdown button with content. I think JQ should be the best solution but I don't know how to edit it correctly (I was trying to).

Thanks for interested.

Active Dropdown Button on hover

0 Answers0