2012-05-02 8 views
0

CSSホバーメニューに問題があります。CSSホバーメニューの問題

ポップアウトメニューのオプションの1つに行くと完全にうまく飛び出しますが、それは消えてしまいます。私の人生のために、どのように停止するのか分かりませんそうすることから。

サブメニューオプションの1つを選択しようとするとすぐにメニューが消えるのを防ぐ方法はありますか?

私はスタックオーバーフロー(私が間違っていれば正解)を見てきましたが、このようなものは見つかりませんでしたが、この問題を正しく検索する方法がわからないためかもしれません。

これでもjQueryを使ってみましたが、同じ問題がありました。

あなたは問題を完全に示すバイダルhereを見ることができます。

ありがとうございました。

+0

火かき棒を入手して使用する方法を学ぶ必要があります。それは素晴らしいツールです。 getfirebug.com ..答えを教えてくれるでしょう。問題の理由は非常に論理的です。第1レベルの 'li'(':hover'要素)と第2レベル 'ul'(サブメニュー要素)は、それらの間にギャップを持っています。ギャップは、第1レベルの「ul」の大きなパディングによって生成されます。 (確かに、 '.navigation'の小さな詰め物は助けになりません) – Joonas

+0

こんにちはロレェロ、私は火の虫を持っています - しかし私は私が私の方向を失ってしまったので、私はそうするべきだと思っています。 –

答えて

0

のに役立ちます私自身の質問。

.showupと呼ばれるクラスを割り当てました。.navigaiton ul li ulの表示をnoneに設定したクラスを割り当てました。

私はそれが

$('li:has(ul)').hoverIntent(function() { 
    $(this).find('ul').removeClass('hide'); 
    $(this).find('ul').addClass('showup'); 
}, function() { 
    $(this).find('ul').removeClass('showup'); 
    $(this).find('ul').addClass('hide'); 
}) 

を動作させるために、このjQueryのを走ったし、今では素晴らしい作品!

0

あなたのCSSにこれを追加します。

li.sign { 
    width: 80% !important; 
} 

.navigation ul li { 
    width: 115%; 
} 
+0

これは、liから最初のサブメニューオプションに移行しても機能しますが、必ずしも問題を修正することはありません。人々はオプションの上にカーソルを置いて、ポップアウトメニューを見て、必要な場合は下にあるものを選択したいので、それはまだ消えます。しかし、ありがとう。 –

0

ギブ幅 - 私は下のリンクを願っ> .navigation UL応じ

.navigation ul { 
padding: 20px 20px 20px 40px; 
list-style: none; 
    width:300px; // according to your 
} 
+0

もう一度、これはsomoeneが人々がしない 'トップメニュー' - 'サブメニューの最初のオプション'から行くというふうに頼っています。 –