Aide pour un sous menu

miss_rose -  
 Lecineman -
Bonjour,
je voudrais svp creer un sous menu pour produit ou il y aurra un sous menu particulier et professionel
voila le code html
<div id="navMain">
<!--nav start -->
<div id="nav">
<ul class="niveaux1">
<li><a href="index.html">ACCUEIL</a></li>
<li><a href="qui_somme_nous.html">QUI SOMME NOUS?</a></li>
<li class="sousmenu"><a href="nos_produits.html"class="hover">NOS PRODUITS</a>

<ul>
<li><a href="#">professionnel</a></li>
<li><a href="#">particulier</a></li>

</ul>
</li>
<li><a href="contact.html">CONTACTEZ NOUS</a></li>
</ul>

et le code css
div#nav ul.niveaux1 li.sousmenu:hover{display:block
#navMain{
width:100%;
height:24px;
background:url(images/nav_bg.gif) 0 0 repeat-x;
}
#nav{
width:892px;
margin:0 auto;
height:24px;
}
#nav ul{
width:746px;
height:24px;
background:url(images/nav_div.gif) left top no-repeat;
float:left;
}
#nav ul li{
float:left;
background:url(images/nav_div.gif) right top no-repeat;
height:24px;
line-height:0;
font-size:0;
padding:0 2px 0 0;
}
#nav ul li a{
display:block;
background:url(images/nav_bg.gif) 0 0 repeat-x;
font:bold 11px/24px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#B5B5B5;
background-color:inherit;
text-decoration:none;
padding:0 12px 0 10px;
}
#nav ul li a:hover{
background:url(images/nav_bg_hover.gif) 0 0 repeat-x;
color:#fff;
background-color:inherit;
}
#nav ul li a.hover{
display:block;
background:url(images/nav_bg_hover.gif) 0 0 repeat-x;
font:bold 11px/24px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#fff;
background-color:inherit;
text-decoration:none;
padding:0 12px 0 10px;
}
#nav a.login{
display:block;
background:url(images/login_bg.gif) 0 0 no-repeat;
width:60px;
height:24px;
font:bold 11px/24px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#232323;
background-color:inherit;
text-decoration:none;
text-align:center;
float:right;
padding:0;
margin:0;
}
#nav a.login:hover{
color:#E5A923;
background-color:inherit;
}



A voir également:

2 réponses

Réponse 1 / 2
lili34500 Messages postés 178 Date d'inscription   Statut Membre Dernière intervention   16
 
Si tu connait suffisamment tu pourait utiliser jQuery ....

Avec les effets fadeIn() et fadeOut() .
0
Réponse 2 / 2
Lecineman
 
Salut,

Voici un menu, je ne sais pas trop, si c'est ce que tu voulais, t'as plus qu'a copier le code. Regarde les commentaire sur le code pour plus d'infos. 

<html>
	<head>
		<style>
			a { text-decoration: none; font-family: 'Fugaz One', Arial; color: #992b21;
			
			-webkit-transition-duration: 350ms; /* Ici animation de la couleur de l'arrière plan */
			-webkit-transition-property: background-color;
			-webkit-transition-timing-function: ease;
			-moz-transition-duration: 350ms;
			-moz-transition-property:  background-color;
			-moz-transition-timing-function: ease;
			-o-transition-duration: 350ms;
			-o-transition-property:  background-color;
			-o-transition-timing-function: ease;} /* Fin de l'animation */
			
			a:hover { color: white; background-color: #992b21; -webkit-border-radius: 4px; border-radius: 4px; padding: 5px;} 
			.sousmenu ul {display: none;}
			ul {list-style: none;  }
			ul li {margin: 10px; padding: 5px;}
		</style>
		<title> Test formum</title>
		<link href='http://fonts.googleapis.com/css?family=Fugaz+One' rel='stylesheet' type='text/css'> <!-- Pour la police du menu 'Fugaz One' -->
	</head> 
	<body>
<div id="navMain"> 
<!--nav start --> 
<nav> <!-- La balise nav est mieux que le div pour un menu, elle fait partie des nouvelles balises HTML-->
	<ul class="niveaux1"> 
		<li><a href="index.html">ACCUEIL</a></li> 
		<li><a href="qui_somme_nous.html">QUI SOMME NOUS?</a></li> 
		<li class="sousmenu"><a href="javascript:void(0)"class="hover">NOS PRODUITS</a> 
			<ul> 
			<li><a href="http://google.com">professionnel</a></li> 
			<li><a href="#">particulier</a></li> 
			</ul> 
		</li> 
		<li><a href="contact.html">CONTACTEZ NOUS</a></li> 
	</ul>
</nav>
</div>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <!-- La on charge jQuery -->
<script> <!-- code jQuery pour l'animation du sous-menu -->
	$('.sousmenu').click(function(){ // au clic de nos produit : .sous-menu
		$('.sousmenu ul').toggle('slow'); // le sous-menu apparait ou disparait grace a .toggle()
		});
</script>
</body>


Bon courage, et dis-moi, si c'est ça que tu voulais
0

Discussions similaires

accéder au menu caché
Kabos -
Andy31200 -

1 réponse
menu caché
laurent -
ChariduP -

7 réponses
Comment activer le Bluetooth sur une TV Samsung ?
zaraki490 -
Marjo -

110 réponses
Mon PC marque press the esc key for startup menu
Jonas2022 -
SATS_fr -

5 réponses
Déblocage du mode hôtel Philips 20HF5234/10
Jo_3 -
TRAORE_2505 -

7 réponses