Menu en css

Bonjour,
habitué a utiliser les tableaux, j'ai choisi pour mon nouveau projet de le réalisé en xhtml/css, et sa commence plutot mal car je n'arrive pas a avoir le rendu que je désire pour mon menu.

Le menu est horizontal avec des sous menu (verticaux), mais je voudrait que le sous menu n'apparaisse que lorsque la souris est sur le texte du lien (du menu donc), et la mes différent essai ne m'on pas permit de faire cela :s

De plus actuellement mon menu et mes sous menu sont de la meme taille, j'aurais souhaité que mon sous menu soit un peu plus grand, mais je n'ai pas réussi :s

Je vous montre un peu ce que j'ai fait:

xhtml:

<div id="header">
		<ul id=menu><!--id="menu"-->
			<li>
				<a href="#" title="aller au lien">menu 1</a>
				<ul>
					<li><a href="#" title="aller au lien">lien 1</a></li>
					<li><a href="#" title="aller au lien">lien 2</a></li>
					<li><a href="#" title="aller au lien">lien 3</a></li>
					<li><a href="#" title="aller au lien">lien 4</a></li>
				</ul>
			</li>

			<li>
				<a href="#" title="aller au lien">menu 2</a>
				<ul>
					<li><a href="#" title="aller au lien">lien 1</a></li>
					<li><a href="#" title="aller au lien">lien 2</a></li>
					<li><a href="#" title="aller au lien">lien 3</a></li>
					<li><a href="#" title="aller au lien">lien 4</a></li>
				</ul>
			</li>
			
		</ul>
	</div> <!-- header -->

css:

#menu, #menu ul     
{
        padding : 0; 
        margin : 0px; 
        list-style : none;  
        line-height : 21px; 
        text-align : left; 
}

#menu 
{
        font-weight : bold; 
        font-family : Arial; 
        font-size : 12px;
		
}

#menu a 
{
        display : block; 
        padding : 0; 
        
        color : #fff; 
        text-decoration : none; 
        width : 144px; 
}

#menu li       
{ 

        float : right; 
        /* pour IE qui ne reconnaît pas "transparent" */
        border-right : 1px solid #fff; /* on met une bordure blanche à droite de chaque élément */
}

/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li
{
        border-right: 1px solid transparent ; /* on met une bordure transparente à droite de chaque élément */
}

#menu li ul 
{ text-align: left;
        position: absolute; /* Position absolue */
        width: 144px; /* Largeur des sous-listes */
        left: -999em; 
}


#menu li ul li 
{background-color:blue;
        /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
        border-top : 1px solid #fff; /* on met une bordure blanche en haut de chaque élément d'une sous liste */
}

/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li ul li                
{
        border-top : 1px solid transparent; /* on met une bordure transparente en haut de chaque élément */
}



#menu a:hover    
{
        color: #000; /* On passe le texte en noir... */
        /*background: #fff;  ... et au contraire, le fond en blanc */
}

#menu li:hover ul, #menu li.sfhover ul  /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
        left: auto; /* Repositionnement normal */
        min-height: 0; /* Corrige un bug sous IE */
}

Je me sui aider d'un tutorial, mais je n'rrive pas a modifier pour faire comme je veut, et du coup je ne comprend pas le fonctionnement exact
J'espere que certain d'entre vous pourront m'aider a comprendre et a m'expliquer comment faire pour pouvoir continuer a avancer et déja réussir ce menu

Merci a vous

Bonjour,

Si je comprend bien, actuellement la zone cliquable est étendue autour du texte du lien (l'élément "a" possède la propriété "block" et "width") et tu souhaiterai qu'elle soit active uniquement sur le texte du lien ?

Es-tu vraiment sur que ce soit une bonne idée ?
En terme d'ergonomie, il est interessant qu'une zone réactive soit suffisament large pour être cliquable sans nécessiter d'une adresse particulièrement subtile à la souris.
Sans compter que certains déficients moteurs ou accidentés bénéficient spécifiquement des zones réactives larges.
Bien entendu, il ne s'agit jamais d'exagérer sur le phénomène et la zone "cliquable" a tout interêt à être identifiable visuellement.

Dans ton cas, j'aurais plutot tendance à te conseiller d'ajouter un fond, un écartement, ou bien un contour, bref : n'importe quelle astuce graphique, ainsi qu'une hauteur un peu plus grande à ta zone "interactive" (le lien), surtout qu'il s'agit d'éléments d'un menu.

L'élément <a>, est l'élément à modifier. En gros, il s'agit de ta zone réactive. Applique-lui une largeur, une hauteur, des propriétés css. Ou au contraire, considère la comme élément en ligne (par défaut) en retirant le "diplay:block"
Article sur les éléments en-ligne et les éléments de rendu block

PS : Le bbcode de l'éditeur semble ne pas marcher du tout sous Safari PC sur cette nouvelle version du forum, si quelqu'un pouvait remonter l'info...
Modifié par Nigel (17 Jan 2010 - 10:09)

Merci pour ta reponse

Je n'avait pas pensé que la zone cliquable serait peut etre trop juste avec uniquement le lien Je vais essaié juste pour comparé l'ergonomie (encore faut t'il que j'arrive, car je n'ai pas comprit comment faire)

Une autre question, actuellement mes case constituant mon menu son en largeur fixe (donc si mon contenu et court j'ai du vide, et a contraire si il est long sa pose probleme...), j'aurais voulu qu'il s'adapte au contenu.
Et pareille pour le sous-menu qui s'ouvre, il fait exactement la meme taille que le menu de 1er niveau, donc sa peut etre embettant avec des sous-menu long...

Auriez vous quelque solution ou piste a me proposez?

Je me doute que ce sont des questions basique, mais la je n'ai pas réussi a trouvé
Merci de votre aide

Hello,

le principe est de ne pas utiliser width mais de jouer sur le padding. Un petit exemple :

ul {
	list-style: none;
	padding: 0;
	margin: 0;
	overflow: hidden;
}

ul li {
	float: left;
	border: 1px solid #000;
}

ul li a {
	display: block;
	padding: 4px 6px;
	background: #ff9;
	text-decoration: none;
	color: #000;
}

ul li a:hover,
ul li a:focus,
ul li a:active {
	background: #f90;
}

<ul>
	<li><a href="#">machin</a></li>
	<li><a href="#">machintruc</a></li>
	<li><a href="#">machinbidule</a></li>
	<li><a href="#">machinchose</a></li>
	<li><a href="#">mach</a></li>
</ul>

Modifié par Heyoan (17 Jan 2010 - 14:48)

Bonsoir,
merci pour la réponse

J'ai continuer mais différents essai en prenant en compte vos remarques, et j'ai réussi a faire ce que je souhaitez, mais il y a une chose qui ce passe et que je ne comprend pas.

Lorsque je dépasse une certaine taille pour le sous menu, celui ci au lieu de ce mettre en ligne verticale, ce met en horizontal ...

Je vous met le code, si vous voyez le pourquoi du comment (sa n'empeche pas de faire ce que je souhaite, car la taille et plus grande mais la curiosité me pousse a savir pourquoi sa fait sa)

css:

body{
background-color: grey;
}

#nav , #nav ul{
	margin: 50px;
	padding: 0px;
	/*background-color: green;*/
	list-style : none;
	
}
#nav li{   /* 1er niveau */
margin:0px;
	margin-right: 50px;
	float:left;
	background-color: red;
}

#nav  li ul  {   /*2eme niveau */
	position:absolute;
	margin:0px;
	margin-left:0px;
	padding:0px;
	/*padding:4px;*/
	padding-right:20px;
	width:177px;  /* 177 px max dans ce cas */
	background-color: white;
	/*text-align:center;*/
	
	left: -999em;
}

#nav li a:hover{
	color:red;
}

#nav li:hover ul{    /*1er niveau du menu*/
	/*color:red;*/
	left:auto;
	 min-height: 0; 
}

#nav  li ul a:hover {  /* 2eme niveau */
	color:yellow;
}

xhtml:

<ul id="nav">     
	<li>
		<a href="#">nom de la rubrique</a>
			<ul >
				<li>
				 <a href="#">sous 1</a>
				</li>
				<li>
				 <a href="#">sous 2</a>
				</li>
				<li>
				 <a href="#">sous 3</a>
				</li>
				<li>
				 <a href="#">sous 4</a>
				</li>
				<li>
				 <a href="#">sous 5</a>
				</li>
				<li>
				 <a href="#">sous 6</a>
				</li>
			</ul>
	</li>
	<li>
		<a href="#">menu 2</a>
			<ul>
				<li>
				 <a href="#">sous 1</a>
				</li>
				<li>
				 <a href="#">sous 1</a>
				</li>
				<li>
				 <a href="#">sous 1</a>
				</li>
				<li>
				 <a href="#">sous 1</a>
				</li>
			</ul>
	</li>
</ul>

Voila merci a vous