Menu déroulant vertical en CSS

Fermé

hansou0208 Messages postés 2 Date d'inscription lundi 12 novembre 2012 Statut Membre Dernière intervention 12 novembre 2012 - 12 nov. 2012 à 11:56
Atropa Messages postés 1940 Date d'inscription mercredi 25 juin 2008 Statut Membre Dernière intervention 11 mai 2014 - 12 déc. 2013 à 22:31

Bonjour,

J'essaye de tranformer un menu "fixe" en un menu déroulant vertical en HTML/CSS.
Le probleme est que j'ai suivi plusieurs tuto mais je n'y arrive pas.
Pouvez vous m'aider a modifier mon code CSS ?
Merci

Code HTML du menu

<div id="menu">
		<ul>
						<li class="current_page_item"><a href="index.html">Accueil</a></li>
						<li><a href="presentation.html">Qui sommes-nous ? </a></li>
						<ul class="sous-menu">
								<li> <a href="quiSommesNous.html"> Qui sommes-nous? </a></li>
								<li> <a href="notreConcept.html"> Notre concept </a></li>
								<li> <a href="nosValeurs.html"> Nos valeurs </a></li>
						</ul>
						<li><a href="polygonum.html">Le polygonum </a></li>
						<ul class="sous-menu">
								<li> <a href="originePoly.html"> Les origines du polygonum </a></li>
								<li> <a href="composantsPoly.html"> Les composants du polygonm </a></li>
						</ul>
						<li><a href="https://www.moraz.fr/6-baume-reparateur" target="_blank">Commander le produit </a></li>
						<li><a href="contact.html">Nous contacter</a></li>
						<li class="last"><a href="https://www.moraz.fr/" target="_blank">Nos autres produits</a></li>
						
		
		</ul>
		<br/><br/>
	</div>

Code CSS du menu (encore incomplet)

#menu {
background-color : #FFFFF3;
width : 1000px;
margin : auto;
}

#menu ul {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px;
	list-style: none;
	line-height: normal;
	text-align: center;
}

#menu li {
	display: inline-block;
}

#menu a {
	display: block;
	padding: 11px 14px 11px 14px;
	background-color : rgb(123, 143, 56);
	text-decoration: none;
	text-transform: uppercase;
	text-align: center;
	font-family: 'Oswald', arial narrow, sans-serif;
	font-size: 15px;
	font-weight: 200;
	color: #FFFFFF;
	border: none;
}

#menu .current_page_item a {
	background: rgb(246, 169,36);
	}

A voir également:

Html menu déroulant vertical
Menu déroulant excel - Guide
Excel menu déroulant en cascade - Guide
Menu déroulant google sheet - Accueil - Guide bureautique
Editeur html - Télécharger - HTML
Windows 11 menu démarrer classique - Guide

3 réponses

Réponse 1 / 3

Atropa Messages postés 1940 Date d'inscription mercredi 25 juin 2008 Statut Membre Dernière intervention 11 mai 2014 274
12 nov. 2012 à 12:56

voilà le principe :

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
	.sousmenu {
		display: none;
	}

	.menu > li:hover > .sousmenu {
		display: block;
	}


</style>
</head>
<body>
	<ul class="menu">
		<li>
			<div>Nom de la rubrique 1</div>
			<ul class="sousmenu">
				<li>smenu 1</li>
				<li>smenu 2</li>
				<li>smenu 3</li>
			</ul>
		</li>
		<li>
			<div>Nom de la rubrique 2</div>
			<ul class="sousmenu">
				<li>smenu 1</li>
				<li>smenu 2</li>
				<li>smenu 3</li>
			</ul>
		</li>
	</ul>
</body>
</html>

les sous menu doivent être dans les li du menu

Réponse 2 / 3

Atropa Messages postés 1940 Date d'inscription mercredi 25 juin 2008 Statut Membre Dernière intervention 11 mai 2014 274
Modifié par Atropa le 12/11/2012 à 13:24

pour un menu horizontal :

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
	* {
		padding : 0;
		margin: 0;
	}
	
	.menu {
		position: relative;
		border: 1px solid red;
		cursor: pointer;
		list-style: none;
		height: 30px;
		width: 800px;
	}
	
	.menu > li {
		float: left;
		border-right: 1px solid black;
	}
	
	.menu .name {
		height: 30px;
		line-height: 30px;
		width: 199px;
		text-align: center;
		font-weight: bold;
	}
	
	.menu > li:last-child {
		border-right: none;
	}
	
	.menu > li:last-child .name{
		width: 200px;
	}

	.menu .sousmenu {
		display: none;
		list-style: none;
		position: absolute;
		top: 30px;
		left: -1px;
		border: 1px solid green;
		border-top-width: 2px;
		width: 100%;
	}

	.menu li:hover > .sousmenu {
		display: block;
	}

	.menu li:hover > .name {
		background-color: green;
		color: white;
	}


</style>
</head>
<body>
	<ul class="menu">
		<li>
			<div class="name">Nom de la rubrique 1</div>
			<div class="sousmenu">
				<div>rubrique 1</div>
				<ul>
					<li>smenu 1</li>
					<li>smenu 2</li>
					<li>smenu 3</li>
				</ul>
			</div>
		</li>
		<li>
			<div class="name">Nom de la rubrique 2</div>
			<div class="sousmenu">
				<div>rubrique 2</div>
				<ul>
					<li>smenu 4</li>
					<li>smenu 5</li>
					<li>smenu 6</li>
				</ul>
			</div>
		</li>
		<li>
			<div class="name">Nom de la rubrique 3</div>
			<div class="sousmenu">
				<div>rubrique 3</div>
				<ul>
					<li>smenu 7</li>
					<li>smenu 8</li>
					<li>smenu 9</li>
				</ul>
			</div>
		</li>
		<li>
			<div class="name">Nom de la rubrique 4</div>
			<div class="sousmenu">
				<div>rubrique 4</div>
				<ul>
					<li>smenu 10</li>
					<li>smenu 11</li>
					<li>smenu 12</li>
				</ul>
			</div>
		</li>
	</ul>
</body>
</html>

Réponse 3 / 3

deadmix Messages postés 145 Date d'inscription jeudi 14 octobre 2004 Statut Membre Dernière intervention 30 mai 2014 29
12 déc. 2013 à 14:20

Voici un petit tutoriel pour faire un menu déroulant avec la source en html et css :

https://blueseodesign.com/web-design/un-css-menu-deroulant-horizontal/

Bonne chance

Atropa Messages postés 1940 Date d'inscription mercredi 25 juin 2008 Statut Membre Dernière intervention 11 mai 2014 274
12 déc. 2013 à 22:31

depuis le temps j'espère qu'il a réussi ça fait plus d'un an maintenant...

Discussions similaires

Suppression listes déroulantes

Supprimer liste déroulante Excel

Effacer liste déroulante

Barre verticale droite sur clavier

supprimer une liste déroulante