悬停的Bootstrap菜单变暗背景＆gt;闪烁的问题

Question

我尝试在此主题后面对我的网站实施不透明效果：Bootstrap menu on hover darken background

现在导航下拉列表将不再正确打开，并且整个页面在悬停导航时开始闪烁。 在这里观看：http://tekfreak.de

Custom.css：

.slider-opacity{
    background-color: rgba(49, 49, 49, 0.7);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;

    opacity: 0;   
    visibility: hidden;

    transition: background 0.3s ease, color 0.3s ease;
    -webkit-transition: background 0.3s ease, color 0.3s ease;
    -moz-transition: background 0.3s ease, color 0.3s ease;

}

HTML：

{* desktop navigation (> screen-min-sm) *}
{strip}
<div id="evo-main-nav-wrapper" class="nav-wrapper{if $Einstellungen.template.theme.static_header === 'Y'} do-affix{/if}">
    <nav id="evo-main-nav" class="navbar navbar-default" role="navigation">
        <div class="container{if $Einstellungen.template.theme.static_header === 'N' || isset($Einstellungen.template.theme.pagelayout) && $Einstellungen.template.theme.pagelayout !== 'fluid'}-fluid{/if}">
            {if $Einstellungen.template.theme.static_header === 'Y'}
                <div class="navbar-header visible-affix pull-left hidden-xs hidden-sm">
                    <a class="navbar-brand" href="{$ShopURL}" title="{$Einstellungen.global.global_shopname}">
                        {if isset($ShopLogoURL)}
                            {image src=$ShopLogoURL alt=$Einstellungen.global.global_shopname class="img-responsive-height"}
                        {/if}
                    </a>
                </div>
            {/if}
            <div class="megamenu">
                <ul class="nav navbar-nav force-float">
                    {include file='snippets/categories_mega.tpl'}
                    {if $Einstellungen.template.theme.static_header === 'Y'}
                        <li class="cart-menu visible-affix dropdown bs-hover-enabled pull-right{if $nSeitenTyp == 3} current{/if}" data-toggle="basket-items">
                            {include file='basket/cart_dropdown_label.tpl'}
                        </li>
                    {/if}
                </ul>
            </div>

        </div>
    </nav>
</div>
{/strip}
<div class="slider-opacity"></div>
<script type="text/javascript" src="http://tekfreak.de/templates/Evo/js/navopacity.js"></script>

在HTML文件中链接的JS：

$('.nav.navbar-nav').hover(
  function () {
    $('.slider-opacity').css({"opacity": 1, "visibility": "visible"});
  }, function () {
    $('.slider-opacity').css({"opacity": 0, "visibility": "hidden"});
  }
);  

知道这可能是什么吗？