Discussion :

[subakuno]

Bonjour à tous,

Je travaille pour une association (conseil pour petites entreprises) et nous aimerions mettre en place un site internet simple. Comme nous avons très peu de moyens, je tente de me lancer seul dans la création d'un petit site vitrine.

Je n'ai que des connaissances très sommaires mais grâce aux tutos présents sur le net j'arrive tout doucement à ce que je souhaite.

Je tente depuis quelques heures de créer un menu déroulant mais je n'arrive pas à faire en sorte que mon sous-menu s'affiche correctement sous le menu (exemple : Le sous-menu n'est pas de la même taille que le menu, ou le sous-menu est décalé par rapport au menu ou bien le chevauche,....).

Pour le moment j'ai suivi le tuto du site adobe (https://helpx.adobe.com/fr/dreamweav...-web-page.html) pour créer un simple menu à savoir sans les sous-menu.

Je trouve le tuto est simple et le menu plutôt esthétique mais je n'arrive pas à le coupler avec un autre tuto pour créer les listes déroulantes.

Je vous joint ci-dessous le code que j'ai concernant le menu. Je n'ai pour le moment mis dans le code que celui permettant de cacher les sous-menu.

code source :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
  <div id="menu"> 
<ul>
	<li><a href="#" class="thispage">Accueil</a><ul>
		<ul>
			<li><a href="#">Présentation</a></li>
			<li><a href="#">Nos conseils</a></li>
			<li><a href="#">L'équipe</a></li>
		</ul>
	</li>
</ul></li>
</ul>
 
<ul>
	<li><a href="#">Nos missions</a>
		<ul>
	<li><a href="#">Nos services</a></li>
	<li><a href="#">Nos compétences</a></li>
	</ul>
	</ul>
	</li>
</ul>
 
<ul>
<li><a href="#">Nous contacter</a>
</li>
</ul>
 
<ul>
<li><a href="#">Liens utiles</a></li>
</ul>
 
</div>
 
    </div>

Le css :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
#menu ul {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	list-style-type: none;
}
#menu a {
	width: 25%;
	display: block;
	text-decoration: none;
	color: #FFFFFF;
	font-weight: bolder;
	float: left;
	text-transform: uppercase;
	text-align: center;
	background-color: #4D4D4D;
	padding-top: 5px;
	padding-bottom: 5px;
}
#menu a:hover     ,#menu:active,#menu:focus,#menu a.thispage{
	background-color: #43a6cb;
	text-decoration: none;
 
 
#menu ul li ul {			/* sous-liste */
	display: none;				/* cachéé par défaut */
}

Si par hasard quelqu'un pouvait me donner un petit coup de main à faire un beau petit menu, ce serait vraiment très gentil.

Suba.

[miss_socrates]

Soit il existe des scripts de menus déroulants tout faits.
Sinon pour les sous-menus, il suffit d'ajouter dans le code des éléments de liste (dans les balises <li>)