28172 sujets

CSS et mise en forme, CSS3

[résolu] Problème menu CSS 2 niveau

Bonjour!
Après avoir cherché sur Alsacréations (merveilleux site !!), je me décide à poster. Je vous explique mon problème :
Je voudrais faire un menu dans ce style :http://www.behance.net/TheHejz mais pour l'instant mes sous menus s'affichent en liste verticale, et non horizontale. Je suis sur d'être passé à coté d'un truc tout bête mais je n'arrive pas à voir... Merci pour votre aide.

PS ; j'ai suivis un tuto sur le web qui a pour but d'afficher les sous menus de la meme manière que moi (verticale).

Mon code CSS :
/* CSS Document */

div#menu {
	text-align:center;
	}

div#menu a {
	color:#000000;
	}
	
div#menu ul {
	margin:0px;
	background:white;
	}

/* positionnement des éléments du menu*/

div#menu ul li {
	position:relative;
	list-style:none;
	float:left;
	background:white;
	}

div#menu ul ul {
	position:absolute;
	float:left;
	display:none;
	width:100px;

	}
	
div#menu li a {
	text-decoration:none;
	padding:0;
	display:block; 
	width: 100px;
	}
	
div#menu li a:hover {
	background:#edd;
	}
	
div#menu li.sousmenu {
	background:white;
	}
div#menu li.sousmenu:hover {
	background:#EBB;
	}

div#menu ul.niveau1 li.sousmenu:hover ul.niveau2 {
	position:absolute;
	float:left;
	display:block;
	}

Mon code HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>

<link href="style.css" rel="stylesheet" type="text/css" />
</head>



<body>


<div id="menu">
	<ul class="niveau1">
		<li><a href="menu1">menu1</a></li>
		<li class="sousmenu"><a href="menu2">menu2</a>
			<ul class="niveau2">
				<li><a href="smenu2.1">Sous menu2.1</a></li>
				<li><a href="smenu3.1">Sous menu3.1</a></li>
				<li><a href="smenu3.1">Sous menu3.1</a></li>
			</ul>
		</li>
		<li class="sousmenu"><a href="menu3">menu3</a>
			<ul class="niveau2">
				<li><a href="smenu3.1">Sous menu3.1</a></li>
				<li><a href="smenu3.1">Sous menu3.1</a></li>
				<li><a href="smenu3.1">Sous menu3.1</a></li>
				<li><a href="smenu3.1">Sous menu3.1</a></li>
			</ul>
		</li>
		<li class="sousmenu"><a href="menu4">menu4</a>
			<ul class="niveau2">
				<li><a href="smenu4.1">Sous menu4.1</a></li>
			</ul>
		</li>
		<li class="sousmenu"><a href="menu5">menu5</a>
			<ul class="niveau2">
				<li><a href="smenu5.1">Sous menu5.1</a></li>
				<li><a href="smenu3.1">Sous menu3.1</a></li>
				<li><a href="smenu3.1">Sous menu3.1</a></li>
				<li><a href="smenu3.1">Sous menu3.1</a></li>
				<li><a href="smenu3.1">Sous menu3.1</a></li>
			</ul>
		</li>
		<li><a href="menu6">menu6</a></li>
	</ul>
</div>
				


</body>
</html>

Modifié par rodhia (26 Sep 2008 - 17:22)
rodhia a écrit :
Je voudrais faire un menu dans ce style :http://www.behance.net/TheHejz

Mouais. C'est tout de même pas terrible comme menu. L'ergonomie de ce menu me semble bien défaillante (utilisation à la souris problématique, sans parler du touchpad ou autre système de pointage pas super précis; «sous-menus» vides pour certaines rubriques). Sans parler de l'accessibilité de la chose (qui pourrait être plutôt bien négociée, mais ne l'est pas du tout ici). Smiley ohwell
Merci Mecho, j'essaie sa ce soir la je suis au boulot.
Florent, tu aurais des idées de menu accessible? Un menu juste en bandeau sans sous menus au survol peut etre?
rodhia a écrit :
Florent, tu aurais des idées de menu accessible? Un menu juste en bandeau sans sous menus au survol peut etre?

Ce même menu, mais avec un affichage des sous-menus au clic et non au survol.
Sans javascript, la deuxième ligne affiche le sous-menu de la rubrique en cours et pas les autres. Tous les liens de premier niveau permettent d'accéder à un index de la rubrique, et donc d'accéder à ce menu de second niveau (et tant qu'à faire à une offre de contenu qui résume la rubrique).
Sujet clos
Aller à