Hauteur et largeur dans un sous menu.

Bonjour,

Je n'arrive pas à fixé la taille des cases de mon sous-menu, la taille semble fixé par mon texte.

Voici le HTML :

   	<header>
   	 <div id="entete">   </div>
   	 <div id="banniere_menu_horizon">   
	 <div id="meteo"> </div>
	<ul id="barre_menu_horizon" >
<li><a href="index.html"><img src="pictures/HOME.png" alt="Accueil" border="0" title="Retour à la page d'accueil"  /></a></li>
<li><a href="javascript [langue]opupWindow(this,'01/01_0001_010112_01a.html');"><img src="pictures/INFO.png" border="0" title="Information générale" alt="Information général" /></a></li>
<li><a href="mailto:danieldhaese@hotmail.fr"><img src="pictures/MAIL.png" border="0" title="Envoyer un email au club" alt="Mail Club" /></a></li>
<li><a><img src="pictures/FILE.png" border="0" alt="Archives"  title="Archives" /></a>
 

 <ul id="sousMenu">
   <li><a href="02/021/021_00001_010112_01a.html">Les dossiers</a></li>
   <li><a href="02/022/022_00001_010112_01a.html">Résultats sportifs</a></li>
   <li><a href="02/023/023_00001_010112_01a.html">Revues de presses</a></li>
   <li><a href="02/024/024_00001_010112_01a.html">inclassables</a></li>
  </ul>


</li>
    </ul>
	</div>
    </header>

et le CSS :

#barre_menu_horizon {
		background-color: #752060;
		background-position: center center;
		background-repeat: no-repeat;
		position: relative; 	
		top: -8px;
		width : 750px; height : 38px;
		left: 20px;
		float: left;
		 }
ul  {
		list-style-type : none;
		padding : 0px;
		}
#barre_menu_horizon #sousMenu
{
 position: relative;
 left: 200px;
 display: none;
 list-style-type: none;
 margin: 0px;
 padding: 0px;
 border: 5px solid transparent;
 width : 600px;
}
#barre_menu_horizon li:hover > #sousMenu { display: block; }
#barre_menu_horizon li:last-child{
		margin-left:180px
		}
#barre_menu_horizon #sousMenu li{
		display: inline;
 		margin: 0px;
		padding: 0px;
		border: 0;
}
#barre_menu_horizon li{
		display: inline;
 		margin: 0px;
		padding: 0;
		border: 0;
}
#barre_menu_horizon li a {
		text-decoration : none;
		margin: 30px;
}
ul li a img:hover{
		-webkit-box-shadow:0 0 12px white;
		-moz-box-shadow:0 0 12px white;
		box-shadow:0 0 12px white;
}
#barre_menu_horizon #sousMenu li a:link,
#barre_menu_horizon #sousMenu li a:visited
{
 display: inline;
 color: #FFF;
 margin: 0;
 border: 0;
 text-decoration: none;
 background: transparent url("pictures/fondTR.png") repeat;
}
#barre_menu_horizon #sousMenu li a:hover
{
 background-image: none;
 background-color: #752060;
}

merci

Salut,

Il te faut ceci je pense:

li{
display:[b]inline-block[/b];
width:175px;
height:75px;
}

les tailles sont arbitraires.
Modifié par jmlapam (10 Dec 2011 - 08:04)