メインメニューのドロップダウンが閉じられてもサブメニューリンクがクリック可能になる

Question

ナビゲーションバー、ナビゲーションバー内の折りたたみ可能なメニュー、およびウェブサイトのコンテンツを持つ設定を作成しようとしています。

悪い例えば申し訳ありませんが、種類のこのような：あなたがドロップダウンが展開されていないときは、サブメニューのリンクの上にマウスを置くならば、あなたはまだそれらをクリックすることができます見ることができるようにhttps://jsfiddle.net/2nqchLpf/

。

ナビゲーションバーがすべて表示されている状態で、コンテンツの後ろにリンクを表示するにはどうすればよいですか？

私はこのようなz-indexを適用しています

.navbar { 
    position: fixed; 
    z-index: 1000; 
} 

.big-dropdown { 
    position: absolute; 
    z-index: -1; 
} 

#content { 
    position: relative; 
    z-index: 999; 
} 

Answer 1

を働くだろう。 Basics of the CSS z-index property

position: absoluteを既に使用しているので、シンプルで簡単な解決方法は、サブリンクを画面から移動するだけです。だからではなく、本の

：

.big-dropdown { 
    opacity: 0; 
    height: 200px; 
    background-color: #fff; 
    position: absolute; 
    left: 0; 
    top: 0; 
    margin-top: 4em; 
    width: 100%; 
} 

.show { 
    opacity: 1!important; 
} 

はこのような何か試してみてください：

.big-dropdown { 
    opacity: 0; 
    height: 200px; 
    background-color: #fff; 
    position: absolute; 
    left: -9999px; /* adjustment */ 
    top: 0; 
    margin-top: 4em; 
    width: 100%; 
} 

.show { 
    opacity: 1!important; 
    left: 0; /* new */ 
} 

revised fiddle

Answer 2

あなたは

.show { 
display: block; 
} 

と使用して

.show { 
opacity: 1!important; 
} 

を交換する場合、これはあなたが探している正確に何ではないかもしれないが、

display: none; 

代わりの

opacity: 0; 

それは積み重ね順序や他のz-indexの特性を考慮し、z-indexとトリッキーだ