Menu horizontal: Coller le texte à la bordure du bas

Salut à vous!

Je souhaite réaliser le menu horizontal suivant:



Ce que je n'arriva pas à faire: coller le texte (un lien) aux bordures du bas!

Le css:

#headermenu
{
  height:			40px;
  width:			860px;
  margin-left:		auto;
  margin-right:		auto;
  z-index: 100;
}

#headermenu ul
{
  padding-top: 10px;
  list-style: none; 
}
#headermenu ul li
{
  /*display: inline;*/
  float: left;
  margin-left: 11px;
  line-height: 15px;
  height: 15px;

}
#headermenu ul li a
{
  margin: 0;
  color:	white;
  font-size:15px;
  line-height: 15px;
  font-weight: bold;
  text-transform: uppercase;
  z-index: 100;
  border-bottom:5px solid white;	/*ed1d24*/
  /*padding-left: 8px;*/
  padding:0;
}

#headermenu li a:hover, #headermenu li a:focus, #headermenu li a:active 
{
    border-bottom:5px solid #e50000; 
	  color:	#e50000; 
}

Et le menu en xhtml:

<div id="headermenu">
		  <ul>
			<li ><a href="index.html">menu1</a></li> 
			<li><a href="index.html">menu2</a></span></li> 
			<li><a href="index.html">menu3</a></li>
			<li ><a href="index.html">menu4</a></li>
			<li><a href="index.html">menu5</a></li>
		  </ul>
		</div>

Une idée? D'avance merci!
Modifié par Tester0 (19 Feb 2010 - 16:59)

Salut

J'ai ajouté que ceci à ce div. Ça fonctionne partout.

#headermenu ul li a 
{ 
  display:block
  line-height: 11px; 
} 

Bonjour et bienvenu sur le forum.

On arrive simplement à ce résultat en passant la bordure sur l'élément de liste et en jouant avec la hauteur de ligne.

Ci-dessous le code remanié :

#menu { 
  height: 30px; 
  width:  860px; 
  margin: 0 auto; 
  padding-top: 10px; 
  list-style: none;  
  background:  red;
} 
 
#menu li { 
  float: left; 
  margin-left: 11px; 
  line-height: 12px; 
  border-bottom: 5px solid white;
} 

#menu li a { 
  color: white; 
  font-size:15px; 
  font-weight: bold; 
  text-transform: uppercase; 
  text-decoration: none;
}

--

<ul id="menu"> 
  <li><a href="index.html">menu1</a></li>  
  <li><a href="index.html">menu2</a></span></li>  
  <li><a href="index.html">menu3</a></li> 
  <li><a href="index.html">menu4</a></li> 
  <li><a href="index.html">menu5</a></li> 
</ul>

Au passage, les z-index ne sont utiles qu'en cas d'éléments positionnés.

Le problème avec ta solution Corinne, c'est qu'en a:hover, la bordure ne change pas de couleur.

Merci à vous 2!

Sorano: Ça marche parfaitement, merci beaucoup! Je n'ai même pas essayé ça dans mes tests, quelle honte...

Corinne S.: avec ta solution et "#headermenu li :hover ...", voila le résultat (et je pense que IE va me faire des misères en plus...):

Modifié par Tester0 (19 Feb 2010 - 22:55)

Sorano a écrit :
Le problème avec ta solution Corinne, c'est qu'en a:hover, la bordure ne change pas de couleur.

En a:hover, non.
Mais en li:hover, oui.

Je n'avais effectivement pas précisé le comportement au rollover. Le voici :

#menu li:hover { border-bottom: 5px solid red; } 

Tester0 a écrit :
(et je pense que IE va me faire des misères en plus...):

ie, non.
ie6, oui.
Mais je n'ai lu nulle part qu'il devait être supporté.
Modifié par Corinne S. (22 Feb 2010 - 16:32)

Tester0 a écrit :
Sorano: Ça marche parfaitement, merci beaucoup! Je n'ai même pas essayé ça dans mes tests, quelle honte...

PS : si le problème est [résolu], ce serait bien de l'indiquer dans le titre.