HTML + CSS: Liste avec les problèmes de sous-menu

en essayant de construire un simple menu HTML + CSS avec des sous-menus contextuels.HTML + CSS: Liste avec les problèmes de sous-menu

Si un élément de liste possède une liste d'enfants et qu'il est placé en position verticale, la liste des enfants s'affiche. Cela fonctionne déjà. Mais je veux que l'élément parent soit en tête de la liste des enfants. Je l'ai essayé avec l'index z et .. a échoué. L'enfant chevauche toujours le parent.

J'essaie de faire cela pour faire le look pop-up comme celui-ci:

________ ________ 
|Link 1| |Link 2|______ 
      |-> Sublink 1| 
      |-> Sublink 2| 
      |____________|

donc point parent et enfant article n'a pas de frontières visibles entre eux, mais les frontières autour d'eux.

C'est le HTML:

<html> 
<head> 
<style type="text/css"> 
a { color: #000; } 

body { background: #444; } 

#mainlist { list-style: none; } 

#mainlist li 
{ 
    float: left; 
    margin-left: 10px; 
    border-top: 1px solid black; 
    border-left: 1px solid black; 
    border-right: 1px solid black; 
    padding: 10px; 
    background: #aaa; 
    display: inline; 
} 

#sublist 
{ 
    background: #aaa; 
    border: 1px solid black; 
    width: 100px; 
    display: none; 
    position: absolute; 
    list-style: none; 
    margin: 0px; 
    padding: 0px; 
    margin-left: -11px; 

} 

#sublist li 
{ 
    border: none; 
    background: #aaa; 
    width: 100%; 
    text-align: left; 
} 

#sublist li:hover { background: #ccc; } 

#mainlist li:hover { z-index: 60; } 

       /* When mainlist li is hovered show the sublist */ 
#mainlist li:hover > #sublist 
{ 
    z-index: 50; 
    display: block; 
} 


</style> 

</head> 
<body> 
    <ul id="mainlist"> 
    <li><a href="#">Testlink 1</a></li> 
    <li><a href="#">Testlink 2</a> 
    <ul id="sublist"> 
    <li>Test 1</li> 
    <li>Test 2</li> 
    </ul> 
    </li> 
    </ul> 
</body> 
</html>

Source

2010-09-09 JohnKa

Vous pouvez le faire en modifiant votre CSS légèrement. Actuellement, votre top level <li> est le style de vos articles principaux. Il n'y a aucun moyen de les faire apparaître au-dessus du #sublist car le #sublist en est un enfant (vous ne pouvez pas mettre un enfant d'un élément derrière son parent).

La solution consiste à appliquer les styles d'élément de niveau supérieur sur les étiquettes <a>. Ce sont des frères et sœurs du #sublist et ainsi de les empiler avec z-index est facile:

Comme une simple démonstration, ajoutez cette règle à votre CSS et vous verrez le #sublist est maintenant en dessous du <a>:

#mainlist li a { 
    padding: 10px; 
    background: red; 
    position: relative; 
    z-index: 60; 
}

Tout ce que vous avez à faire est de transférer toutes les règles CSS #mainlist li à #mainlist li a.

Source

2010-09-09 14:23:50 Pat

Merci, cela fonctionne très bien. – JohnKa

HTML + CSS: Liste avec les problèmes de sous-menu

Répondre

Questions connexes