28172 sujets

CSS et mise en forme, CSS3

[Résolu] Menu uniquement CSS

Bonjour à vous,

j'aimerai soliciter votre aide concernant un menu entiérement fait en CSS.

Je rencontre un petit problème que je n'arrive pas à identifier Smiley decu

Ce menu est structuré via des "ul" et des "li" imbriqué (classiques quoi).
A l'état d'origine, un élément du menu posséde une police de couleur noir et background-color blanc.

Au survol de ceux-ci, le background-color passe en rouge et la couleur de police en blanc. Jusqu'ici tout va bien.

Lorsque je descend d'un niveau dans le menu, l'élément menu parent conserve son background-color rouge mais la police redevient noir. Je ne vois pas comment laissé cette couleur à blanc...

Pourriez vous m'aider?

Voici les deux codes :

CSS

body {
behavior: url(csshover.htc);
font-family : calibri,sans-serif;
font-size: 11px;
font-weight:bold;
}
div#menu {width: 220px;}

/* fond blanc pour le menu */
div#menu a {color:black}
div#menu a:hover {color:white}
div#menu ul {padding: 0; width: 220px; margin:0px; background: white}

/* fond different au survol de la souris pour les sous menu et les "basiques"*/
div#menu li:hover {background: red; color: white;}
div#menu li.sousmenu:hover {background: red; color: white;}

div#menu ul li {position:relative; list-style: none; border:1px solid #CCCCCC;}
div#menu ul ul {position: absolute; top: -1px; left: 220px; display:none;}

/* on rajoute une bordure a gauche et des padding, on doit donc réajuster la taille 220-8 de padding =212 */
div#menu li a {text-decoration: none; padding: 4px 0 4px 8px; display:block; width:212px;}
div#menu ul.niveau1 li.sousmenu:hover ul.niveau2,
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3,
div#menu ul.niveau3 li.sousmenu:hover ul.niveau4 {display:block;}


et le code HTML :


<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
	<title>Menu G&eacute;n&eacute;ral</title>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="menu">
	<ul class="niveau1">
	    <li class="sousmenu"><a href="editorial.php">ESPACE EDITORIAL</a>
			<ul class="niveau2">
	            <li><a href="presentation.php">PRESENTATION</a></li>
	            <li><a href="presse.php">PRESSE 2008</a></li>
	            <li><a href="lettres.php">LETTRE</a></li>
	            <li><a href="vie_groupe.php">LA VIE</a></li>
	            <li><a href="succes.php">SUCCES</a></li>
	         </ul>
		<li class="sousmenu"><a href="espace_admin.php">ESPACE ADMINISTRATIF</a>
			<ul class="niveau2">
		        <li class="sousmenu"><a href="Snote_serv.php">NOTES DE SERVICES</a>
				    <ul class="niveau3">
		                <li class="sousmenu"><a href="theme1">THEME 1</a>
			                <ul class="niveau4">
				                <li><a href="theme1">THEME 1.1</a></li>
				            </ul>
						</li>
		                <li><a href="theme2">THEME 2</a></li>
		                <li><a href="theme3">THEME 3</a></li>
		            </ul>
				</li>
			</ul>
		</li>
	</ul>
</div>
</body>
</html>


Merci par avance de votre aide

Archange
Modifié par Archange (18 Aug 2008 - 17:02)
Bonjour,

La couleur de tes liens est déterminée comme suit:
div#menu a {color:black}
div#menu a:hover {color:white}

Si le pointeur n'est pas sur le lien, la couleur revient à noir.
Il te faudrait donc:
div#menu a {color:black}
div#menu li:hover a {color:white}


En passant, ça va pas être super accessible comme menu, ça. Utilisable uniquement à la souris (pas de navigation au clavier), pas de délai avant fermeture des sous-menus...
Merci pour votre réponse rapide.

Pour ce qui est de l'accessibilité, je n'y suis pour rien... j'ai des responsables qui veulent un menu comme celui-ci (c'est pour un intranet d'entreprise).

Pour la solution proposée, ca c'est amélioré et dégradé en même temps lol.
L'élément parent reste bien avec une police blanche mais le problème c'est que tout ces enfants récupére également un police blanche. Le hic c'est que le background est également blanc... Niveau lisibilité, on a vu mieux Smiley lol

Voyez vous une autre solution?
En me basant sur votre solution, j'ai réglé mon soucis...

Mais je pense que ce n'est pas du tout "optimisé" au niveau du code CSS. Ca à le mérité de fonctionner mais je trouve ca pas propre...

Voilà le code css :


body {
behavior: url(csshover.htc);
font-family : calibri,sans-serif;
font-size: 11px;
font-weight:bold;
}
div#menu {width: 220px;}

/* fond blanc pour le menu */
div#menu a {color:black}
/*div#menu a:hover {color:white}*/
div#menu ul {padding: 0; width: 220px; margin:0px; background: white}
div#menu ul:active a {color: #CCCCCC}

/*  Gestion des niveaux du menu*/
/*niveau 1*/
div#menu li:hover {background: red;}
div#menu ul.niveau1 li:hover a {color:white}
/*niveau 2*/
div#menu ul.niveau1 ul.niveau2 li a {color: black}
div#menu ul.niveau1 ul.niveau2 li a:hover {color: white}
div#menu ul.niveau1 ul.niveau2 li:hover a {color: white}
/*niveau 3*/
div#menu ul.niveau1 ul.niveau2 ul.niveau3 li a {color: black}
div#menu ul.niveau1 ul.niveau2 ul.niveau3 li a:hover {color: white}
div#menu ul.niveau1 ul.niveau2 ul.niveau3 li:hover a {color: white}
/*niveau 4*/
div#menu ul.niveau1 ul.niveau2 ul.niveau3 ul.niveau4 li a {color: black}
div#menu ul.niveau1 ul.niveau2 ul.niveau3 ul.niveau4 li a:hover {color: white}

div#menu ul li {position:relative; list-style: none; border:1px solid #CCCCCC;color: black;}
div#menu ul ul {position: absolute; top: -1px; left: 220px; display:none;color: black;}

/* on rajoute une bordure a gauche et des padding, on doit donc réajuster la taille 100-(8 de bordure + 8 de padding) =84 */
div#menu li a {text-decoration: none; padding: 4px 0 4px 8px; display:block; width:212px;color: black}
div#menu ul.niveau1 li.sousmenu:hover ul.niveau2,
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3,
div#menu ul.niveau3 li.sousmenu:hover ul.niveau4 {display:block;}

/* la bordure de chaque hauteur a une couleure de survol*/
/*div#menu li a:hover {border-left-color: red;}
div#menu ul ul li a:hover {border-left-color: #00FF00;}
div#menu ul ul ul li a:hover {border-left-color: #0000FF;}*/
Sujet clos
Aller à