Menu déroulant

Résolu

Franois -
Geiffy - 30 avril 2018 à 10:08

Bonjour à tous,

Je suis en train de créer un site avec Notepad++ qui est très avancé désormais. J'ai créé un menu horizontal déroulant qui fonctionne bien, à part les sous-menus qui demeurent ostensiblement cachés. Pourtant, en mettant ce menu en vertical, je vois bien apparaître les éléments des sous-menus. En essayant les CSS proposés par plusieurs internautes (dont le menu et sous-menus fonctionnaient parfaitement), je n'ai jamais réussi à voir apparaître les miens. Je me suis donc interrogé sur ma version de Notepad. J'ai fait un nouveau téléchargement de la dernière version de ce logiciel, mais je n'ai pas eu d'amélioration au niveau de mon menu déroulant. Je remercie infiniment les webmasters en mesure de m'apporter une précieuse aide afin d'arriver à comprendre d'où vient ce problème.

A voir également:

Menu déroulant
Menu déroulant excel - Guide
Excel menu déroulant en cascade - Guide
Menu déroulant google sheet - Accueil - Guide bureautique
Supprimer menu déroulant excel - Forum Excel
Canon quick menu - Télécharger - Utilitaires

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

Bonjour,

Notepad++ ... est un éditeur de texte....
Il n'affiche pas ton site.... ton site s'affiche à travers un navigateur web.
Le souci se trouve donc au niveau du code html/css que tu as écrit.

Geiffy

Bonjour Jordane,

Effectivement, Notepad n'est qu'un traitement de texte. Je me demande pourquoi en suivant pas à pas les méthodes proposés par plusieurs internautes, je n'arrive jamais à afficher les sous-menus. Les boutons principaux du menu horizontal (accueil, etc...) fonctionnent parfaitement quant à eux. Evidemment, il est difficile pour toi de voir ce qui bloque sans voir les pages html et css de mon menu. Bien cordialement à toi. Geiffy.

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752 > Geiffy

, il est difficile pour toi de voir ce qui bloque sans voir les pages html et css de mon menu

Je confirme.
C'est bien pour ça qu'il faudrait que tu postes ton code sur le forum.

NB: Pour poster ton code, merci de le faire en utilisant les BALISES DE CODE
Explications disponibles ici : https://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code

Geiffy

<!DOCTYPE html>
<html lang="fr">
	<head>
		<title>Accueil</title>
		<meta charset="utf-8"/>
		<meta name="viewport" content="width=device=width, initial-scale=1.0">
        		<link rel="stylesheet" type="text/css" href="fichiers-css/menu-horizontal.css">
		<link rel="stylesheet" type="text/css" href="fichiers-css/index.css">
		<!--[if lte IE 8]>
		<script src="html5.js" type="text/javascript"></script>
		<![endif]-->
	</head>
		<div id="logo">
			<img src="../../Pictures/site_triunicie_banniere.jpg" alt= Bannière de la Triunicie/>
		</div>
	<body>
		<div id="barre-menu">
			<nav>
				<ul>
				<li class="menu-index"><a href="index.html">Accueil</a></li>
				<li class="menu-a-propos"><a href="a-propos.html">A propos de la Triunicie</a></li>
					<ul class="submenu">
						<li><a href="naissance-triunicie.html">Comment est née la Triunicie?</a></li>
						<li><a href="but-triunicie.html">Les hauts principes de la Triunicie</a></li>
					</ul>
				</li>
				<li class="menu-livres"><a href="livres.html">Les livres</a></li>
					<ul class="submenu">
						<li><a href="trois-tomes.html">Les trois tomes de la Triunicie</a></li>
						<li><a href="ouvrages.html">Les ouvrages autour de la Triunicie</a></li>
						<li><a href="livres-humanistes.html">Les livres à caractère humaniste</a></li>
						<li><a href="livres-autobiographiques.html">Livres autobiographiques</a></li>
					</ul>
				</li>
				<li class="menu-reactions"><a href="reactions.html">Pour réagir!</a></li>
				<li class="menu-tribune"><a href="tribune.html">Votre tribune</a></li>
				<li class="menu-journal"><a href="journal.html">Journal de la Triunicie</a></li>
				<ul class="submenu">
						<li><a href="sujets-societe.html">Sur des sujets de société</a></li>
						<li><a href="fil-actualite.html">Au fil de l'actualité</a></li>
						<li><a href="actions-triunicie.html">Les actions de la Triunicie</a></li>
					</ul>
				</li>
			</nav>
		</div>
	</body>
</html>
<html>
	<body>
		<div id="menu-vertical">
			<ul>
		<div id="title">
				<h5>Pour mieux comprendre la Triunicie</h5>
				</div>
				
			<li class="menu-constat"><a href="constat.html">Un constat nécessaire</a></li>
			<li class="menu-democratie-triunite"><a href="democratie-triunite.html">La démocratie triunite</a></li>
			<li class="menu-regimes disparates"><a href="regimes-disparates.html">Des régimes disparates</a></li>
			<li class="menu-monde-finance"><a href="monde-finance.html">Un monde dominé par la finance</a></li>
			<li class="menu-triunicie-republique"><a href="triunicie-republique.html">Triunicie et République</a></li>
			<li class="menu-ethique-actuelle"><a href="ethique-actuelle.html">Constat sur l'éthique actuelle</a></li>
			<li class="menu-triunicie-ethique"><a href="triunicie-ethique.html">La Triunicie et l'éthique</a></li>
			<li class="menu-responsabilite-spirituelle"><a href="responsabilite-spirituelle.html">La responsabilité spirituelle</a></li>
			<li class="menu-science-spiritualite"><a href="science-spiritualite.html">Science et spiritualité</a></li>
			<li class="menu-economie-triunite"><a href="economie-triunite.html">L'économie triunite</a></li>
			<li class="menu-droits-humains"><a href="droits-humains.html">L'universalité des droits humains</a></li>
			<li class="menu-triunicie-ecologie"><a href="triunicie-ecologie.html">Triunicie et écologie</a></li>
			<li class="menu-triunicie-progres"><a href="triunicie-progres.html">Triunicie et progrès</a></li>
			<li class="menu-generation-triunicie"><a href="generation-triunicie.html">La génération Triunicie</a></li>
		
			<li><a href="http://www.supportduweb.com/compteur-global-gratuit-sans-inscription-live-pages-vues-visites.html" style="background:transparent; border-left:transparent; width:80px; height:120px; padding-top:270px; float-left"><img src="http://services.supportduweb.com/cpt_global/117251-11.png" alt="Compteur Global gratuit sans inscription" /></a></li>
			</li>
		</ul>
		
		</div>
		
		<div id="contenu">
			<section>
			<h1>Bienvenue sur le site de la Triunicie</h1>
			
			</section>
			<article>
				<p>Certes, ce modèle de société, que vous allez découvrir dans ce site, est totalement inédit. Lors d'une première lecture, il vous apparaîtra sûrement utopique. Je vous invite donc à en approfondir le <em>fondement</em> ainsi que les <em>hautes valeurs</em> qu'il contient.</p>
				
				</article>
				<div style="height:20px; width:50px; float:left; margin-top:25px" id="share">
				<iframe src="http://www.facebook.com/plugins/like.php?href=http://www.example.com/page.html&layout=box_count&show_faces=true&width=65&action=like&font=arial&colorscheme=light&height=65" 
				scrolling="no" frameborder="0" style="position:relative; margin-top: 150px"></iframe>
				</div>
				<div style="height:70px; width:550px; float:right;margin-top:35px" id="link"
				<a href="http://facebook.com/missionne.francois.9" title="Suivez-nous sur facebook !"><img src="../../Pictures/logo_facebook.png" style="margin-top:150px"/></a>
				</div>
				
				
		</div>
		
					
		<div id="footer">

				© - Triunicie est un nom protégé - Le logo de la Triunicie est un modèle déposé.</br>
				  - Toute copie ou reproduction, même partielle, est interdite et punie par la loi.
		</div>
	</body>
</html>

Geiffy

body{
	font-family: Calibri, 'Source code pro', Times New Roman, sans-serif;
	font-size: 16px;
	margin: 0px;
	padding: 0px;
}
nav{
	width: 100%;
	background-color: #3498DB;
}
nav > ul{
	margin: 0px;
	padding: 0px;
}
nav > ul::after{
	content:"";
	display: block;
	clear: both;
}
nav > ul > li{
	float: left;
	position: relative;
}
nav > ul > li > a{
	padding: 20px 30px;
	color: #7B241C;
}
nav > ul > li:hover a{
	padding: 15px 30px 20px 30px;
}
nav li{
	list-style-type: none;
}
.submenu{
	display: none;
}
nav a{
	display: inline-block;
	text-decoration: none;
}
nav li:hover .submenu{
	display: inline-block;
	position: absolute;
	top: 100%;
	left: 0px;
	padding: 0px;
	z-index: 100000;
}
.submenu li{
	border-bottom: 1px solid #F7DC6F;
}
.submenu li a{
	padding: 15px 30px;
	font-size: 13px;
	color: #7B241C;
	width: 270px;
}
.menu-index:hover{
	border-top: 5px solid #1A5276;
	background-color: RGB(169, 204, 227, 1.0);
}
.menu-a-propos:hover{
	border-top: 5px solid #145A32;
	background-color: RGB(162, 217, 206, 1.0);
}
.menu-livres:hover{
	border-top: 5px solid #D4AC0D;
	background-color: RGB(247, 220, 111, 1.0);
}
.menu-reactions:hover{
	border-top: 5px solid #6C3483;
	background-color: RGB(187, 143, 206, 1.0);
}
.menu-tribune:hover{
	border-top: 5px solid #935116;
	background-color: RGB(240, 178, 122, 1.0);
}
.menu-journal:hover{
	border-top: 5px solid #515A5A;
	background-color: RGB(191, 201, 202, 1.0);
}
.menu-a-propos .submenu{
	background-color: RGB(241, 196, 15);
}
.menu-livres .submenu{
	background-color: RGB(72, 201, 176);
}
.menu-journal .submenu{
	background-color: RGB(72, 201,176);
}
.submenu li:hover a{
	color: #9A7D0A;
	font-weight: bold;
}
.menu-a-propos .submenu li:hover{
	background-color: RGB(235, 152, 78);
}
.menu-livres .submenu li:hover{
	background-color: RGB(130, 224, 170);
}
.menu-journal .submenu li:hover{
	background-color: RGB(88, 214, 141);
}

Geiffy

Bonjour Jordane,

Un grand merci! J'ai suivi ton conseil à la lettre et les sous-menus sont apparus illico. Enseignement? Des balises mal placées ou redondantes peuvent en effet créer un blocage. Encore merci. Bonne fête du 1er mai. Bien cordialement à toi. François.

Discussions similaires

Suppression listes déroulantes

Supprimer liste déroulante Excel

Effacer liste déroulante

menu caché

supprimer une liste déroulante

Votre réponse

Discussions similaires