Sujet Précédent Sujet Suivant

Je n'arrive pas différencier mon menu de mon

gaya_102 -  
le hollandais volant Messages postés 5294 Statut Membre -
Bonjour,
j'ai beau faire des tests de changement de couleurs de tailles ... les modifications que je fais s'appliquent automatiquement au menu et sous menu. En fait je voudrais que la taille de la police soit plus petite dans le sous menu mais je n'y arrive pas. 

/* Menu */

#menu, #menu ul /* Liste */	
{
	padding : 0; /* pas de marge intérieure */
	margin : 0; /* ni extérieure */
	list-style : none; /* on supprime le style par défault de la liste */
	line-height : 21px; /* on défini une hauteur pour chaque élément */
	text-align : center; /* on centre le texte qui se trouve dans la liste */
}

#menu /* Ensemble du menu */
{
	
	font-family : Comic Sans MS; /* on utilise Arial c'est plus beau ^^ */
	font-size : 11px; /* hauteur du texte : 12 pixels */
}

#menu a /* Contenu des listes */
{
	display	: block; /* on change le type d'élément, les liens deviennent des balises de type block */
	padding	: 0; /* aucune marge intérieure */
	background : #f2d8fc; /* couleur de fond */	
	color : #b75dc5; /* couleur du texte */
	text-decoration : none; /* on supprime le style par défault des liens (la pluspart du temps = souligné) */
	width : 112px; /* largeur */
}

#menu li /* Elements des listes */	
{ 
	float : left; 
	/* pour ie qui ne reconnait pas "transparent" */
	border-right : 1px solid red; /* 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 transparante à droite de chaque élément du menu */
}

#menu li ul /* Sous-listes */
{ 
	position: absolute; /* Position absolu */
	width: 144px; /* Largeur des sous-listes */
	left: -999em; /* Hop, on envoi loin du champ de vision */
}


#menu li ul li /* Eléments de sous-listes */
{
	/* pour ie qui ne reconnait pas "transparent" (comme précédement) */
	border-top : 1px solid red; /* 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 #b65bc4; /* on met une bordure transparante en haut de chaque élément */
}

#menu li ul ul 
{
	margin		: -22px 0 0 144px ; /* On décale les sous-sous-listes qu'elles ne soient pas au dessus des sous-listes */	
	/* pour ie qui ne reconnait pas "transparent" (comme précédement) */
	border-left	: 1px solid #fff ; /* Petite bordure à gauche pour ne pas coller ... */	
}

/* ie ne reconnaissant pas le sélecteur ">" ... je me répète ;-) */
html>body #menu li ul ul		
{
	border-left	: 1px solid transparent ; /* on met une bordure transparante sur la gauche de chaque élément */
}

#menu a:hover /* Lorsque la souris passe sur un des liens */	
{
	color: #610a6f; /* On passe le texte en noir ... */
	background: #f2d8fc; /* ... et au contraire, le fond en blanc */
}

#menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
{
	left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
}

#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li 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 */
}

a
{
	text-decoration: none;
	color: #ae0000;
}




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>le monde de gaya et ses faire part</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <meta name="Description" content="Vos faire-part de naissance, mariage, remerciements, stickers et tableaux personnalisés qui vous correspondent le mieux ... Aide pour vos événements : mariage/pacs, communion, anniversaire ...">
	<meta name="keywords" content="faire, part, parts, faire-parts, faireparts, faire part, fairepart, mariage, deuil, deces, remerciement, union, naissance, fete, bebe, marie, ligne, en-ligne, online, original, artisanal, bapteme, papier, rare, unique, maries, creation, main, qualite, travail, soigne, soin, passion, invite, invitation, jubile, menu, remerciement, livre d'or" /><meta name="Robots" content="All">
<meta name="author" content="Thaon Sandrine">
<meta name="revisit-after" content="5 days">

<base href="http://www.lemondedegaya.fr/boutique/">
		<link rel="stylesheet" href="menu4.css" type="text/css" media="screen"/>
	    <link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="page.css" />
		
		<script type="text/javascript">
		sfHover = function() {
		var sfEls = document.getElementById("menu").getElementsByTagName("LI");
		for (var i=0; i<sfEls.length; i++) {
			sfEls[i].onmouseover=function() {
				this.className+="sfhover";
			}
			sfEls[i].onmouseout=function() {
				this.className=this.className.replace(new RegExp("sfhover\\b"), "");
			}
		}
		}
		if (window.attachEvent) window.attachEvent("onload", sfHover);
		</script>


</head>
 
   <body>

 
       <div id="unite">      

<div id="titre">   
 
 Le monde de Gaya
 
 </div>  
 <div id="texte">   
 
 Faire-part de mariage originaux et  personnalisés.   <br>
 
 </div>  
	   
           <div id="menubas">
          <?php
include("menu4.php");
?> 
          
           </div>
           
       </div>        
   </body>
</html>



<div>
<ul id="menu">

					<li>
						<a href="mariage.php">Accueil</a>

					</li>
					<li><img src="images/fleur_menu_page.jpg" alt="images/fleur_menu_page.jpg"/></li>

					
					<li>
						<a href="#">Mariage</a>
						<ul>
							<li><a href="#">connexion</a></li>
							<li><a href="#">inscription</a></li>
						</ul>

					</li>
					<li><img src="images/fleur_menu_page.jpg" alt="images/fleur_menu_page.jpg"/></li>

					<li>
						<a href="#">Naissance</a>
						<ul>
							<li><a href="#">photos</a></li>
							<li><a href="#">vidéos</a></li>
						</ul>
					</li>
					<li><img src="images/fleur_menu_page.jpg" alt="images/fleur_menu_page.jpg"/></li>

					<li>
						<a href="#">Divers</a>

						
					</li>
					<li><img src="images/fleur_menu_page.jpg" alt="images/fleur_menu_page.jpg"/></li>

					<li>
						<a href="#">Contact</a>

					</li>

					
				</ul>
				
				<div>


merci d'avance de votre aide
A voir également:

1 réponse

Réponse 1 / 1
le hollandais volant Messages postés 5294 Statut Membre 1 058
 
Salut!

Suffit de mettre dans tes sous-listes :
font-size: 0.8em;
ou
font-size: 80%;
0

Discussions similaires

TV continental Edison bloqué sur le menu
Utilisateur anonyme -
jeannets -

1 réponse
menu caché
laurent -
ChariduP -

7 réponses
Mon PC marque press the esc key for startup menu
Jonas2022 -
SATS_fr -

5 réponses
Comment activer le Bluetooth sur une TV Samsung ?
zaraki490 -
Marjo -

110 réponses
Déblocage du mode hôtel Philips 20HF5234/10
Jo_3 -
TRAORE_2505 -

7 réponses