悬停时的活动下拉按钮

Question

我使用此方法获取下拉菜单（在此处查找：Adding a slide effect to bootstrap dropdown）并修改使用悬停操作。

@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;
}

}

它适用于移动设备和标签/笔记本电脑/ PC，但我想在悬停时强制激活下拉按钮。一点点：

What I want和how it's look now

对于此按钮，我使用此代码：

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

}

我试图使用此代码来实现我想要的效果：

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

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

它可以添加背景颜色，但这不是我想要的。我希望在悬停时获得活动的Dropdown按钮，就像点击它一样。

所以我在思考脚本标签中的一些JQ脚本。我发现了一些HERE。

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

但问题出在移动设备上，因为我需要点击两次才能打开包含内容的“下拉列表”按钮。我认为JQ应该是最好的解决方案，但我不知道如何正确编辑它（我试图）。

感谢您的关注。