Menu déroulant vertical et horizontal

Question

Kamidh

24 Aug 2012 à 16:45

Bonjour,

Je suis nouveau sur le forum et viens chercher un peu d'aide, voila bien longtemps que je n'ai pas été la tête dans le flux...

Je cherche à faire un menu horizontal avec un niveau vertical puis horizontal, par exemple dans mon cas :

[HORIZONTAL] => // Valeurs et Convictions - Technologie - Gamme - Revendeurs - Moustache et vous - Support - FAQ - Contact //

puis quand on passe la souris sur "Gamme" un menu vertical =>

Ville
Urbain
Vtc
Vtt
Draisienne

pour chaque section de ce nouveau menu je souhaite revenir à l'horizontal...

Pas sure d'avoir été bien clair... Smiley rolleyes

J'ai essayer avec une class .horizontal mais je n'arrive à rien...

Voici un bout du code :

<header id="banner" class="body">

		<div id="logo"><a href=""><img src="images/logo.png" alt="logo" /></a></div>
		
		<div id="social-icons">
			<ul class="social_bookmarks">
				<li class="facebook"><a href="http://www.facebook.com/"><img src="images/icon-facebook-white.png" alt="facebook" /></a></li>
				<li class="dribbble"><a href="http://dribbble.com/"><img src="images/icon-dribbble-white.png" alt="dribbble" /></a></li>
				<li class="twitter"><a href="http://twitter.com/"><img src="images/icon-twitter-white.png" alt="twitter" /></a></li>
				<li class="forrst"><a href="http://forrst.com/"><img src="images/icon-forrst-white.png" alt="forrst" /></a></li>	
				<li class="flickr"><a href="http://www.flickr.com/photos/"><img src="images/icon-flickr-white.png" alt="flickr" /></a></li>
				<li class="vimeo"><a href="http://vimeo.com/"><img src="images/icon-vimeo-white.png" alt="vimeo" /></a></li>
				<li class="tumblr"><a href=""><img src="images/icon-tumblr-white.png" alt="tumblr" /></a></li>
			</ul>
		</div>

		<nav>
			
			<ul>
				<li class="active"><a href="">Valeurs et Convictions</a>
					<ul>
						<li><a href="gallery-2col.html">La genèse</a></li>
						<li><a href="gallery-3col.html">Pourquoi Moustache</a></li>
						<li><a href="gallery-4col.html">Nos choix</a></li>
						<li><a href="gallery-4col.html">L'entreprise</a></li>
					</ul>
				</li>	
				<li><a href="">Technologie</a>
					<ul>
						<li><a href="gallery-2col.html">Le VAE</a></li>
						<li><a href="gallery-3col.html">Nos cadres</a></li>
						<li><a href="gallery-4col.html">Bosch</a></li>
						<li><a href="gallery-4col.html">Nuvinci</a></li>
						<li><a href="gallery-4col.html">Composants</a></li>
					</ul>
				</li>
				<li><a href="">Gamme</a>
					<ul>
						<li><a href="portfolio-2col.html">Ville</a>
							<ul class="horizontal">
								<li><a href="portfolio-2col.html">Lundi 26 9V</a></li>
								<li><a href="portfolio-3col.html">Lundi 26 Nuvinci</a></li>
								<li><a href="portfolio-4col.html">Lundi 26 Harmony <br>Swiss Edition</a></li>
							</ul>
						</li>
						<li><a href="portfolio-3col.html">Urbain</a>
							<ul>
								<li><a href="portfolio-2col.html">Friday 26 9V</a></li>
								<li><a href="portfolio-4col.html">Friday 26 Harmony <br>Swiss Edition</a></li>
							</ul>
						</li>
						<li><a href="portfolio-4col.html">VTC</a>
							<ul>
								<li><a href="portfolio-2col.html">Samedi 28 9V</a></li>
								<li><a href="portfolio-3col.html">Samedi 28 10V 45</a></li>
								<li><a href="portfolio-3col.html">Samedi 28 Nuvinci</a></li>
								<li><a href="portfolio-4col.html">Samedi 28 Harmony <br>Swiss Edition</a></li>
							</ul>
						</li>
						<li><a href="project.html">VTT</a>
							<ul>
								<li><a href="portfolio-2col.html">Samedi 26 9V</a></li>
								<li><a href="portfolio-3col.html">Samedi 26 10V</a></li>
								<li><a href="portfolio-4col.html">Samedi 26 Harmony <br>Swiss Edition</a></li>
							</ul>
						</li>
						<li><a href="project.html">Draisienne</a>
							<ul>
								<li><a href="portfolio-2col.html">Mercredi 12</a></li>
							</ul>
						</li>
					</ul>
				</li>
				<li><a href="">Revendeurs</a>
					<ul>
						<li><a href="portfolio-2col.html">Revendeurs Agréés</a></li>
						<li><a href="portfolio-3col.html">Distributeurs internationaux</a></li>
					</ul>
				</li>
				<li><a href="">Moustache et vous</a>
					<ul>
						<li><a href="gallery-2col.html">Communauté</a></li>
						<li><a href="gallery-3col.html">Galerie photos</a></li>
						<li><a href="gallery-4col.html">On parle de nous</a></li>
						<li><a href="gallery-4col.html">On aime</a></li>
					</ul>
				</li>
				<li><a href="">Support</a>
					<ul>
						<li><a href="gallery-2col.html">Enregistrer</a></li>
						<li><a href="gallery-3col.html">Mode d'emploi</a></li>
						<li><a href="gallery-4col.html">Didacticiels vidéos</a></li>
						<li><a href="gallery-4col.html">Téléchargements</a></li>
						<li><a href="gallery-4col.html">Clé perdue</a></li>
					</ul>
				</li>
				<li><a href="">FAQ</a>
					<ul>
						<li><a href="gallery-2col.html">Généralités</a></li>
						<li><a href="gallery-3col.html">Batterie</a></li>
						<li><a href="gallery-4col.html">Moteur</a></li>
						<li><a href="gallery-4col.html">Aspects pratiques</a></li>
					</ul>
				</li>
				<li><a href="">Contact</a>
					<ul>
						<li><a href="about.html">Nous contacter</a></li>
						<li><a href="services.html">Nous trouver</a></li>
					</ul>
				</li>
			</ul>

		</nav>

	</header><!-- /#banner -->

/* Menu */
#banner {
	z-index: 9999;
}

#banner a:hover, #banner a:active, #banner a:link, #banner a:visited {
	background: none;
}

#banner nav {
	background-image: url(../images/menu-bg-v2.png);
	font-size: 20px;
	height: 80px;
	line-height: 30px;
	padding: 0;
	text-align: left;
	width: 100%;
	z-index: 999;
}

.default-page  #banner nav {
	position: fixed;
	top: 130px;
}

.home #banner nav {
	position: fixed;
	bottom: 360px;
}
	
#banner nav ul {list-style: none; width: auto; margin-top: 20px; }

#banner nav li {float: left; display: inline; margin: 0; }

#banner nav li a {
	font-size: 16px;
}
	
#banner nav a:link, #banner nav a:visited {
	color: #fff;
	display: inline-block;
	padding: 5px 10px;
	text-decoration: none;
	font-family: 'Armata',"Helvetica Neue",Arial,Helvetica,Geneva,sans-serif;
	font-weight: lighter;
	
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	-ms-transition: all 0.2s ease;	
	transition: all 0.2s ease;
}

#banner nav a:hover, #banner nav a:active, #banner nav .active a:link, #banner nav .active a:visited {
	color: #b4aba2;
	text-shadow: none !important;
	font-family: 'Armata',"Helvetica Neue",Arial,Helvetica,Geneva,sans-serif;
	font-weight: lighter;
}

#banner nav li ul li{
	margin: 0 15px;
}


#banner nav li ul {
	display: none;
	position: absolute;
	margin: 0;
	margin-left: 10px;
	margin-top: 20px;
	top: 60px;
	width: 190px;
	z-index: 2;
	cursor: pointer;
	border-top: 2px solid #b4aba2;
	background-color: #fff;
	-moz-box-shadow: 0 4px 15px rgba(0,0,0,0.1);
	-webkit-box-shadow: 0 4px 15px rgba(0,0,0,0.1);
	box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

#banner nav li ul li{
	border-bottom: 1px solid #d4d4d4;
}


#banner nav li ul li:last-child {
	border: none;
}

#banner nav li ul a:link, #banner nav li ul a:visited {
	padding: 0;
	padding-top: 10px;
	padding-bottom: 10px;
	color: #484848;
}

#banner nav li ul a {
	width: 160px;
	height: auto;
	float: left;
	text-align: left;
	line-height: 23px;
	padding: 10px 0 8px 0;
	font-size: 12px;
	min-height: 23px;
	max-width: none;
	text-decoration: none;
}

#banner nav li ul a:hover, #banner nav li ul a.current {
	background: none;
	color: #b4aba2;
}


#banner nav li ul li:first-child a, #banner nav li ul li:first-child .active a:link, #banner nav li ul li:first-child .active a:visited {
	background-image: url(../images/menu-up.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	margin-top: -9px;
	padding-top: 17px !important;
}

#banner nav li ul li:last-child a {
	background-image: none;
}

#banner nav li ul ul{
	top:auto;
	padding-top: 0px !important;
}	

#banner nav li ul ul {
	left: 160px;
	top:-1px;
}

#banner nav li ul ul li:first-child a {
	background-image: url(../images/menu-left.png.html);
	background-repeat: no-repeat;
	background-position: 0px 20px;
	margin-left: -24px;
	padding-left: 24px !important;
}

#banner nav li ul ul {}

#banner nav li:hover ul ul, #banner nav li:hover ul ul ul, #banner nav li:hover ul ul ul ul{
	display:none;	
}

#banner nav li:hover ul, #banner nav li li:hover ul, #banner nav li li li:hover ul, #banner nav li li li li:hover ul{
	display:block;
}

Sujet clos

CSS et mise en forme, CSS3

Menu déroulant vertical et horizontal