18041 sujets

Questions générales et questions de débutants

Menu en Ul / Li imbriqué avec different style

Bonjour.

J'essaye ( en recopiant plusieurs tuto ) de faire un menu en slide down avec plusieurs styles pour le menu principal et pour le sous menu.

j'ai écrit ça



	<div id="bandeaunavig">  
  <ul class="menu" id="menu">
  <li id="nav-1" class="menulink"><a href="#"></a></li>
  
 <li id="nav-2"><a href="#"></a>
 	
		<ul id="deroulant">
			<li id="deroulant-1">     <a href="ligne1"></a></li>
			<li id="deroulant-2">     <a href="ligne2"></a></li>
			<li id="deroulant-3">     <a href="ligne3"></a></li>
		</ul>
 	
    	
 </li>
 
    <li id="nav-3"><a href="#"></a></li>
    <li id="nav-4"><a href="#"></a></li>
    <li id="nav-5"><a href="#"></a></li>
    <li id="nav-6"><a href="#"></a></li>
  </ul>
  </div>



J'ai mis un style sur le UL / Li Principal
et j'ai voulu appliquer un style pour le UL / LI secondaire.



#bandeaunavig #menu { margin:0px 0px; padding:0px 0 0 0px; width: 1104px; height: 41px; float:left;}
#bandeaunavig #menu li { display: inline;}
#bandeaunavig #menu li a { float: left; padding-top: 41px;  overflow: hidden; background-image: url(images/menu_ligne.jpg); background-repeat: no-repeat; }

#bandeaunavig #menu li#nav-1 a { background-position: 0px 0px; width: 166px; height: 0;}
#bandeaunavig #menu li#nav-2 a { background-position: -166px 0px; width: 225px; height: 0;}
#bandeaunavig #menu li#nav-3 a { background-position: -391px 0; width: 334px; height: 0;}
#bandeaunavig #menu li#nav-4 a { background-position: -725px 0; width: 187px; height: 0;}
#bandeaunavig #menu li#nav-5 a { background-position: -912px 0; width: 49px; height: 0;}
#bandeaunavig #menu li#nav-6 a { background-position: -961px 0; width: 44px; height: 0;}

#bandeaunavig #menu li#nav-1 a:hover { background-position: 0px -41px; }
#bandeaunavig #menu li#nav-2 a:hover { background-position: -166px -41px; }
#bandeaunavig #menu li#nav-3 a:hover { background-position: -391px -41px; }
#bandeaunavig #menu li#nav-4 a:hover { background-position: -725px -41px; }
#bandeaunavig #menu li#nav-5 a:hover { background-position: -912px -41px; }
#bandeaunavig #menu li#nav-6 a:hover { background-position: -961px -41px; }


#bandeaunavig  #deroulant { margin:0px 0px; padding:0px 0 0 0px; width: 237px; height: 32px; float:left;}
#bandeaunavig  #deroulant li { display: inline;}
#bandeaunavig  #deroulant li a { float: left; padding-top: 0px 106px;  overflow: hidden; background-image: url(images/sousmenu.png); background-repeat: no-repeat; }

#bandeaunavig  #deroulant li#1 a { background-position: 0px 0px; width: 237px; height: 32px;}
#bandeaunavig  #deroulant li#2 a { background-position: 0px -32px; width: 237px; height: 36px;}
#bandeaunavig  #deroulant li#3 a { background-position: 0px -68px; width: 237px; height: 38px;}

#bandeaunavig  #deroulant li#1 a:hover { background-position: 0px -106px; }
#bandeaunavig  #deroulant li#2 a:hover { background-position: 0px -138px; }
#bandeaunavig  #deroulant li#3  a:hover { background-position: 0px -174px; }


Probleme tout part en biberine dans le menu secondaire du moment qu'il est rattaché au principal ( il marche bien en isolé )

C'est a dire qu'il perd totalement sa mise en forme pour en faire une que je sais meme pas d'ou elle sort ( taille des lignes par exemple )
Comment faire ??

Merci
J'ai manqué de te répondre car l'intitulé de ton message n'était pas clair du tout;
Bon voici un code que j'ai sous la main qui peut t'aider comme base. 

<!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=UTF-8" />
<title>Document sans nom</title>
<style type="text/css">
body {
	font: normal 100.01% Helvetica, Arial, sans-serif;
	color: black;
}
#bord {
	width: 47.1em;
	padding: 0.8em;
	border: 1px solid black;
	background-color: silver;
}
* html #bord {  /* correction pour IE 5.x */
	width: 48.7em;
	w\idth: 47.1em;
}
#bord {
	clear: left;
}
ul#menu {
	margin: 0;
	padding: 0;
	text-align: center;
}
ul#menu li {
	list-style: none;
	float: left;  /* sans width - permis d'après CSS 2.1 erlaubt */
	position: relative;
	margin: 0.4em;
	padding: 0;
}
* html ul#menu li {  /* correction pour IE 5 et 6 */
	margin-bottom: -0.4em;
}
*:first-child+html ul#menu li {  /* correction pour IE 7 */
	margin-bottom: -0.1em;
}
ul#menu li ul {
	margin: 0;
	padding: 0;
	position: absolute;
	top: 1.6em;
	left: -0.4em;
	display: none;  /* cacher le sous-menu */
}
* html ul#menu li ul {  /* correction pour IE 5.x */
	left: -1.5em;
	lef\t: -0.4em;
}
*:first-child+html ul#menu ul {  /* adaptation pour IE 7 */
	background-color:silver;
	padding-bottom:0.4em;
}
ul#menu li:hover ul {
	display: block;  /* afficher le sous-menu par les navigaters modernes */
}
ul#menu li ul li {
	float: none;
	display: block;
	margin-bottom: 0.2em;
}
ul#menu a, ul#menu span {
	display: block;
	width: 6.4em;  /* attribuer la largeur aux éléments contenus dans li */
	padding: 0.2em 1em;
	text-decoration: none;
	font-weight: bold;
	border: 1px solid black;
	border-left-color: white;
	border-top-color: white;
	color: maroon;
	background-color: #ccc;
}
* html ul#menu a, * html ul#menu span {
	width: 8.6em;   /* largeur pour ancien modèle de boîte pour IE 5.x */
	w\idth: 6.4em;  /* largeur correcte pour IE 6 en mode standard */
}
ul#menu a:hover, ul#menu span, li a#actif {
	border-color: white;
	border-left-color: black;
	border-top-color: black;
	color: white;
	background-color: gray;
}
li a#actif {  /* marquer la rubrique active */
	color: maroon;
	background-color: silver;
}
ul#menu li ul span {  /* marquer la sous-page active */
	background-color: maroon;
}
</style>
</head>
<body>
<h1 id="exemple">Menu à plusieurs niveaux</h1>
<ul id="menu">
  <li><a href="#exemple">Page 1</a></li>
  <li><a href="#exemple">Page 2</a>
    <ul>
      <li><a href="#exemple">Page 2a</a></li>
      <li><a href="#exemple">Page 2b</a></li>
      <li><a href="#exemple">Page 2c</a></li>
    </ul>
  </li>
  <li><a href="#exemple">Page 3</a></li>
  <li><a href="#exemple">Page 4</a></li>
</ul>
</body>
</html>
Smiley smile
Modifié par rodolpheb (19 Nov 2012 - 15:06)
Sujet clos
Aller à