Positionner une liste imbriquée dans CSS sur Hover

Question

Je crée un centre, un menu de navigation imbriqué, et j'essaie d'utiliser du CSS pur. Voir une démo de travail ICI: http://jsfiddle.net/jenstechs/MKtTN/2/

HTML:

<nav> 
    <ul id="primary"> 
    <li><a href="#">Link One</a></li> 
    <li><a href="#">Link Two</a></li> 
    <li><a href="#">Link Threee</a> 
     <ul class="secondary"> 
      <li><a href="#">Services One</a></li> 
      <li><a href="#">Services Two</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Link Four</a></li> 
    <li><a href="#">Link Fiiiiive</a></li> 
    </ul> 
</nav> 

CSS:

nav { 
    margin:15px auto 10px auto; 
    width:100%; 
} 

nav ul#primary { 
    width: 100%; 
    padding: 10px 0; 
    margin: 0; 
    background-color: #FFF; 
    text-align: center; 
} 

nav ul#primary>li { 
    display: inline; 
    padding:5px 0; 
    margin-left:0; 
} 

nav ul#primary>li>a { 
    padding: 0px 30px; 
    margin-right:-6px; 
    color: #000; 
    text-decoration: none; 
    border-right:2px solid #999; 
} 

nav ul#primary>li>a:hover, 
nav ul#primary>li.active>a { 
    background-color: #900; 
    color:#FFF; 
    padding-top:10px; 
    padding-bottom:25px; 
} 

nav ul#primary>li:first-child a { 
    border-left:2px solid #999; 
} 

ul.secondary { 
    padding-top:0; 
    position:absolute; 
    display:none; 
} 
ul.secondary li { 
} 

nav ul#primary li:hover ul.secondary { 
    display:block; 
} 
nav ul#primary li:hover ul.secondary li { 
} 

ul.secondary li a { 
    display:block; 
    width:7em; 
    color:#FFF; 
    background-color:#900; 
    font-size:0.8em; 
    text-decoration:none; 
    text-align:left; 
    line-height:1.4em; 
    border-bottom:1px solid #FFF; 
} 

ul.secondary li:last-child a { 
    border-bottom:0; 
} 

ul.secondary li a:hover { 
    color:#DDD; 
} 
​ 

J'ai aussi une remise à zéro minimale, les seuls styles qu'il a sur les listes est quelques marges par défaut.

Puisqu'il s'agit d'une barre de navigation centrée, le CSS que j'utilise est en ligne et non flottant. Je n'ai donc aucune idée de ce qu'il faut mettre dans le CSS pour positionner le sous-menu en dessous de son élément parent. La plupart des exemples que j'ai vus ont une position: absolue mais qui semble la garder à gauche. J'ai essayé différentes méthodes de cacher et montrer (affichage :, gauche :) mais n'arrive pas à trouver cette combinaison magique.

Ici, je n'ai qu'une seule sous-liste, mais que faire si j'avais des sous-listes pour chacune d'entre elles?

Merci pour des conseils ou des liens vers des exemples ...

Answer 1

Pour faire position: absolute éléments position par rapport à leurs parents, font le parent position: relative.

Dans votre cas:

nav ul#primary>li { 
    display: inline; 
    padding:5px 0; 
    margin-left:0; 

    position: relative; 
} 

Démo: http://jsfiddle.net/MKtTN/3/