28234 sujets

CSS et mise en forme, CSS3

Problème display none

Bonjour à tous, je suis nouveau sur ce site. J'ai un petit problème. J'ai fait un menu déroulant mais avec l'option display:none, le sous menu ne s'affiche jamais. Je voudrais qu'il s'affiche quand le souris passe dessus.

<html >

<head>
	<title>page de menu</title>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<meta name="robots" content="all" />
	<link rel="stylesheet" type="text/css" href="design1.css" title="default" media="screen" /></head>

<body>

	<ul id="menuDeroulant">
		<li>
			<a href="#">menu1</a>
			<ul class="sousMenu">
				<li><a href="#">1.1</a></li>
				<li><a href="#">1.2</a></li>
				<li><a href="#">1.3</a></li>		
			</ul>
		</li>
		<li>
			<a href="#">menu2</a>
			<ul class="sousMenu">			      
				<li><a href="#">2.1</a></li>
				<li><a href="#">2.2</a></li>
				<li><a href="#">2.3</a></li>
			</ul>
		</li>
	</ul>
	
</body>
</html>




body
{
 font: 11px verdana, sans-serif;
 background: #AFA99B top left no-repeat;
 margin: 0;
 padding: 0;

}
#menuDeroulant
{
 width: 644px;
 list-style-type: none;
 margin: 0;
 padding: 0;
 border: 0;
 position: absolute;
 top: 0;
 left: 0;
}   		
	

#menuDeroulant li
{
 float: left;
 margin: 0;
 padding: 0;
 border: 0;
}

#menuDeroulant li a:link, #menuDeroulant li a:visited
{
 display: block;
 height: 1%;
 color: #FFF;
 background: #3B4E77;
 margin: 0;
 padding: 4px 8px;
 border-right: 1px solid #fff;
 text-decoration: none;
}
#menuDeroulant li a:hover { background-color: #F2462E; }
#menuDeroulant li a:active { background-color: #5F879D; }

#menuDeroulant .sousMenu li a:link,
#menuDeroulant .sousMenu li a:visited
{
 display: block;
 color: #FFF;
 margin: 0;
 border: 0;
 text-decoration: none;
 background: transparent url repeat;
}
#menuDeroulant .sousMenu li a:hover
{
 background-image: none;
 background-color: #F2462E;
}			

#menuDeroulant .sousMenu li
{
 float: none;
 margin: 0;
 padding: 0;
 border: 0;
 width: 149px;
 border-top: 1px solid transparent;
 border-right: 1px solid transparent;
}			
#menuDeroulant .sousMenu
{
 display: none;
 /*visibility:Hidden;*/
 list-style-type: none;
 margin: 0;
 padding: 0;
 border: 0;
}


Voila, si quelqu'un peux m'aider, merci Smiley biggrin
Bonjour,

La première chose à vérifier est que ton code HTML est valide, et que tu as bien un Doctype en bonne et due forme (je n'en vois pas dans ton code).

Ensuite, dans ton code CSS tu devrais pouvoir remplacer tous les #machin a:link, #machin a:visited {...} par un plus prosaïque #machin a {..}.

Maintenant, pour faire un menu déroulant en CSS, tu as déjà les bases apparemment, mais il te reste à voir:
1. Le positionnement de tes sous-menus. Il faudra à priori les positionner en absolu (et donc réviser le positionnement absolu s'il n'est pas maitrisé!). Une bonne méthode de travail est de rajouter un style="display:block;" dans le code HTML sur l'un de tes sous-menus (élément UL) pour qu'il s'affiche, et à partir de là, comme tu verras ton sous-menu à l'écran, corriger le positionnement et la mise en forme de ce sous-menu. Une fois les questions de positionnement réglées, tu peux supprimer le code précédent de ton code HTML.
2. Le mécanisme pour afficher et masquer le sous-menu. Pour l'instant tes sous-menus sont toujours masqués. Il s'agit de les afficher lorsque l'élément LI qui les contient est survolé. Ce qui nous donne:
#menuDeroulant > li:hover > .sousMenu {
  display:block;
}


À partir de là, tu as un menu déroulant en HTML-CSS. Mais il ne marche qu'au survol (pseudo-classe :hover), c'est à dire en consultation visuelle sur un ordinateur avec une souris ou un pavé tactile... pour un utilisateur capable d'utiliser cette souris ou ce pavé tactile de manière suffisamment précise. Autrement dit, ce menu déroulant souffre de problèmes d'accessibilité assez forts. Il faudrait pouvoir le rendre utilisable au clavier, par exemple. Pour cela, il faut passer par du JavaScript. Le plugin Superfish pour jQuery, même s'il n'est pas parfait, est une solution intéressante pour ça.

Dans tous les cas, on s'assurera que les liens de premier niveau ne sont pas de faux liens, mais pointent vers des pages d'index de rubrique à partir desquelles on peut accéder aux contenus (par exemple si ces pages d'index de rubrique listent les pages disponible, ou présentent un menu secondaire qui liste ces pages). Ainsi, même si tu n'es pas en mesure de faire un menu déroulant accessible, l'accès aux pages reste possible.
Sujet clos
Aller à