28172 sujets

CSS et mise en forme, CSS3

Menu déroulant

Bonjour
Je suis au lycée et je dois faire un site web. Mais je n'arrive pas à faire mon menu déroulant, les sous-partie marche mais pas les sous-partie des sous-partie. Donc si quelqu'un pourrais me dire ce qu'il ne vas pas dans mon code je lui serais reconnaissant.
Voici les codes html et css.
Et une photo du résultat.


<HTML>
	<HEAD>
		<div>	
			<meta charset="utf-8" />
			<link rel="stylesheet"href="pagetype.css"/>
		</div>
	</HEAD>
	<body>
		<div id="menu">
		<ul id="ul1">
				<li><a>ACCUEIL</a></li>
				<li id="li1"><a>BOUTIQUE</a>	
					<ul id="ul2">
						<li ><a>BÉBÉS</a>
						</li>
						<li id="li2"><a>DÉCO</a>
							<ul id"ul3">
								<li><a>BIJOUX</a></li>
								<li><a>SACS</a></li>
								<li><a>VÊTEMENTS</a></li>
								<li><a>TROUSSES</a></li>
								<li><a>CUISINE</a></li> 
							</ul>
						</li>
						<li><a>ACCESSOIRES</a></li>
					</ul>
				</li>
				<li ><a>À PROPOS</a></li>
			        <li ><a>CONTACT</a></li>
		</ul>
		</div>
	</body>	
</HTML>	




#menu ul {
 	margin:0;
 	padding:0;
 	list-style-type:none;
 	text-align:center;

	 }

 #menu li {
 	float:left;
 	margin:auto;
 	padding:0;
 	
	 }

 #menu li a {
 	display:block;
 	width:100px;
 	color:white;
 	text-decoration:none;
 	padding:5px;
 	background-color: black;
 	}

#ul1 li:hover ul {
 	display:block;
	 }

#li1 :hover ul li {
	 left:auto;
	
 	}

#ul2 {
 	position:absolute;
 	display:none;
 	}

#ul2 li a {
	background-color: blue;
	}

#ul3 {
	display: none;
	position: absolute;
	}
#ul3 { background-color: green;}

 #ul2 li:hover ul {
 	display: block;
 }

#li2 :hover ul li {
	left: auto;
}
bonjour

Effectivement je n'avait pas vu mais cela règle seulement le problème de la couleur de fond, le menu ne s'affiche toujours pas correctement.
Je n'y connait pas grand chose mais en bidouillant, est ce approchant à ton souhait ??


body { }
#menu ul {
 	margin:0;
 	padding:0;
 	list-style-type:none;
 	text-align:center;
}
#menu li {
 	float:left;
 	margin:auto;
 	padding:0;
}
#menu li a {
 	display:block;
 	width:100px;
 	color:white;
 	text-decoration:none;
 	padding:5px;
 	background-color: black;
 	}
#ul1 li:hover ul {
 	display:block;
	 }
#li1 :hover ul li {
	 left:auto;	
 	}
#ul2 {
 	position:absolute;
 	display:none;
 	}
#ul2 li a {
	background-color: blue;
	}
#ul3 {
	display: none;
	position: absolute;
	}
#ul3  li a { background-color: green;
}
#ul2 li:hover ul {
 	display: block;
}
#li2 :hover ul li {
	left: auto;
}



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
	<HEAD>
		<div>	
			<meta charset="utf-8" />
			<link rel="stylesheet"href="menubleupagetype.css"/>
		</div>
	<title>MENU BLEU</title>	
	</HEAD>
	<body>
		<div id="menu">
		<ul id="ul1">
				<li><a>ACCUEIL</a></li>
				<li id="li1"><a>BOUTIQUE</a>	
					<ul id="ul2">
						<li><a>BÉBÉS</a>
						</li>
						<li id="li2"><a>DÉCO</a>
							<ul id="ul3">
								<li><a>BIJOUX</a></li>
								<li><a>SACS</a></li>
								<li><a>VÊTEMENTS</a></li>
								<li><a>TROUSSES</a></li>
								<li><a>CUISINE</a></li> 
								<li><a>ACCESSOIRES</a></li>
							</ul>
						</li>
						<!-- <li><a>ACCESSOIRES</a></li> -->
					</ul>
				</li>
				<li ><a>À PROPOS</a></li>
			        <li ><a>CONTACT</a></li>
		</ul>
		</div>
	</body>	
</HTML>
Sujet clos
Aller à