Les liens de sous-menu sont toujours cliquables lorsque les menus déroulants du menu principal sont fermés

Question

J'essaie de créer une configuration où j'ai une barre de navigation, un menu pliable dans la barre de navigation et le contenu du site Web.

Désolé pour le mauvais exemple, mais un peu comme ceci: https://jsfiddle.net/2nqchLpf/

Comme vous pouvez le voir si vous passez la souris sur les liens sous-menu lorsque le menu déroulant n'est pas étendu, vous pouvez toujours cliquer sur eux.

Comment puis-je obtenir les liens à afficher derrière le contenu tout en affichant la barre de navigation sur tout?

J'ai appliqué z-index comme ceci:

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

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

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

Answer 1

Il est difficile avec z-index, compte tenu de l'ordre d'empilement et d'autres caractéristiques z-index. Voici un run-down complet: Basics of the CSS z-index property

Mais pour une solution simple et facile, puisque vous utilisez déjà position: absolute, il suffit de déplacer les sous-liens hors de l'écran.

Ainsi, au lieu de cela:

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

.show { 
    opacity: 1!important; 
} 

Essayez quelque chose comme ceci:

.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

Cela peut ne pas être exactement ce que vous recherchez, mais si vous remplacez

.show { 
opacity: 1!important; 
} 

avec

.show { 
display: block; 
} 

et utilisé

display: none; 

au lieu de

opacity: 0; 

il travaillerait