は、私は以下のコードとbootsrapでシンプルな2レベルのドロップダウンナビゲーションを持って

Question

ブートストラップdropdpwnメニューにホバー上のアクティブな親メニューアイテムを表示しますホバー上のサブメニュー、ナビアイテムをクリックしない

.dropdown:hover .dropdown-menu { 
    display: block; 
    margin-top: 0; 
} 

i「がiskolánk」NAVの項目をクリックし、サブメニューにカーソルを移動すると、「Iskolánk」NAV項目が白の背景を取得しますが、それはまた、これはアクティブな項目であることを、私を示しており、サブメニューが表示されます。

「Iskolánk」ナビアイテムをクリックして表示されない場合は、サブメニューが表示されますが、カーソルをサブメニューに移動すると、「Iskolánk」ナビゲーション項目が白い背景を失い、表示されませんアクティブなナビアイテムです。

どうすればいいですか？親をクリックするのではなく、常に、ホバー上にサブメニューを表示したい。ブートストラップのCSSとjsファイルはブートストラップのウェブサイトから来たものです。

Answer 1

問題は、サブメニューに移動するときにカーソルがメニュー（親）から離れてしまい、CSSホバーが機能しないということです。したがって、これを解決するには、サブメニューに移動するときに親（メニュー）にホバー効果を保持する単純なjqueryコードを書くことができます。しかし、そのサブメニューを離れるときは、その効果を親から取り除かなければならないことを覚えておいてください。

このコードスニペットをHTMLファイルに追加します。

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('.dropdown-menu').hover(function(){ 
     $(this).parent().css({background:'#eee'}); 
     }) 
     $('.dropdown-menu').mouseleave(function(){ 
     $(this).parent().css({background:'#fff'}); 
     }) 
    }) 
</script>