CSS Positionnement de la liste déroulante horizontale

J'essaie d'implémenter un menu de navigation horizontal avec un menu déroulant horizontal. J'essaie de comprendre comment centrer le texte déroulant horizontal de sorte qu'il se trouve au centre du conteneur de navigation afin que l'utilisateur n'a pas à déplacer la souris à l'extrême gauche pour atteindre les liens.CSS Positionnement de la liste déroulante horizontale

<style type="text/css"> 
#nav-container { 
    padding: 4px; 
    width: 900px; 
    height: 60px; 
    background: #CCC; 
} 
#navbar { 
    margin:0; 
    padding:0; 
} 
#navbar li { 
    padding: 6px; 
    display: inline; 
    list-style: none; 
} 
#navbar li ul { 
    display: none; 
    position: absolute; 
    margin:0; 
    padding:0; 
    width: 900px; 
} 
#navbar li:hover ul { 
    display: block; 
} 

</style> 
</head> 

<body> 
<div id="nav-container"> 
<ul id="navbar"> 
    <li><a href="#">Link</a> 
     <ul> 

      <li><a href="#">Hello</a></li> 
      <li><a href="#">World</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Link</a> 
     <ul> 
      <li><a href="#">Peace</a></li> 

      <li><a href="#">Love</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Link</a> 
     <ul> 
      <li><a href="#">Smiles</a></li> 
      <li><a href="#">Cries</a></li> 

     </ul> 
    </li> 
    <li><a href="#">Link</a> 
     <ul> 
      <li><a href="#">Homer</a></li> 
      <li><a href="#">Peter</a></li> 
     </ul> 

    </li> 
    <li><a href="#">Link</a> 
     <ul> 
      <li><a href="#">Giggity</a></li> 
      <li><a href="#">Fapping</a></li> 
     </ul> 
    </li> 

    <li><a href="#">Link</a> 
     <ul> 
      <li><a href="#">Napster</a></li> 
      <li><a href="#">Myspace</a></li> 
     </ul> 
    </li> 
</ul> 
</div>

Ceci est du code rugueux juste pour montrer un exemple, voici un live example du code.

Merci

Source

2011-01-24 mrdthomas

Une combinaison de positionnement relatif absolu devrait faire l'affaire. J'ai essayé d'ajouter ces deux règles et cela a semblé fonctionner:

#navbar li { 
    position: relative; 
} 

#navbar li ul { 
    position: absolute; 
    left: 0; 
    top: 24px; /* must me same as the height of parent li +/- a couple of pixels */ 
}

Cela semble faire l'affaire.

Source

2011-01-24 06:36:09

qui a fait l'affaire, merci !! – mrdthomas

CSS Positionnement de la liste déroulante horizontale

Répondre

Questions connexes