Wie bekomme ich ein HTML-Element, das sich bei der Anzeige überlagert?

Question

#nav ul ul li { 
    display: block; 
    font-color: blue; 
    font-size: 1.5em; 
    z-index: 1; 
    position: relative; 
} 

Zum Beispiel, ich habe eine mobile ansprechende Website, und das Hauptmenü funktioniert gut, aber wenn ich das Browserfenster die Größe klein zu sein, einen kleinen Bildschirm, wie ein Mobiltelefon zu replizieren .... One der Hauptmenüpunkte, die eine Dropdown-Liste hat, wird über den anderen Hauptmenüpunkten angezeigt. Dies bedeutet, dass die Dropdown-Elemente des Hauptmenüs über einem Hauptmenütext direkt darunter angezeigt werden!

Ich habe z Index getan, so dass das Dropdown-Menü oben sitzt, aber das Problem ist, obwohl es oben sitzt, wird das Hauptmenü darunter angezeigt.

Dies ist der jsfiddle

Answer 1

Wenn Sie z-index nicht setzen, folgen Elemente einer Standardreihenfolge für die oben angezeigt wird:

Wenn kein Element einen z-Index hat, Elemente in dieser Reihenfolge (von unten nach oben) gestapelt:

1. Hintergrund- und Grenzen des Wurzelelementes
2. Descendant Blöcke im normalen Fluss, in der Reihenfolge ihres Auftretens (in HTML)
3. Elementen Descendant positionierte, in der Reihenfolge ihres Auftretens (in HTML)

MDN

In Ihrem HTML , erscheint das ul für das Untermenü vor dem HTML für die anderen Menüelemente, und die anderen Menüelemente werden so über dem Hintergrund des Untermenüs angezeigt.

Um dies zu beheben, stellen Sie einen z-index, so dass der Hintergrund des ul gefördert werden:

#nav ul ul { 
    z-index: 1; 
} 

Fixed JSFiddle