Problem avec le menu déroulant

Fermé

etiennosa Messages postés 128 Date d'inscription mardi 10 mars 2009 Statut Membre Dernière intervention 2 juin 2013 - 10 mars 2009 à 14:24
etiennosa Messages postés 128 Date d'inscription mardi 10 mars 2009 Statut Membre Dernière intervention 2 juin 2013 - 12 mars 2009 à 14:20

Bonjour, Je veux utiliser les menus déroulants dans mon site. Le probleme est que chaque fois que je teste le code, les menus et les sous menus sont alignés verticalement et sont comme les liens ordinaires. Comment faire?
J'ai visité des sites de tutoriels et meme si je copie leur code sourse c'est toujours le meme probleme c'est a dire les menus et les sous menus sont tous alignés verticalement alors que lorsqu'ils testés directement sur le site des tutoriels il n'y a aucun probleme.

J'utilise Dreamweaver Mx pour le developpement des sites
Pardon, j'ai besoin besoin de votre aide
Merci

A voir également:

Problem avec le menu déroulant
Menu déroulant excel - Guide
Menu démarrer windows 11 - Guide
Excel menu déroulant en cascade - Guide
Canon quick menu - Télécharger - Utilitaires
Menu demarrer - Guide

2 réponses

Réponse 1 / 2

karmalo
10 mars 2009 à 15:04

Bonjour,

serait-ce possible de voir le code que tu as généré?
merci
karine

Réponse 2 / 2

etiennosa Messages postés 128 Date d'inscription mardi 10 mars 2009 Statut Membre Dernière intervention 2 juin 2013
11 mars 2009 à 13:01

Bonjour, voici le code entier que j'ai copié sur le site de deveolppez.com et quand je l'insere dans mon Dreamweaver ca ne me donne que des lien alignés verticalement. Voici le lien où j'ai trouvé le code;
https://css.developpez.com/tutoriels/menu-deroulant/fichiers/menu01test.html
Voici pour ton aide

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><title>Testos</title>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="robots" content="all">
<link rel="stylesheet" type="text/css" href="menu01.css" title="default" media="screen">
</head>

<body>

<ul id="menuDeroulant">
<li>
<a href="#">Les castors</a>
<ul class="sousMenu">
<li><a href="#">Pelage doux mais robuste qu'on aime bien beaucoup</a></li>
<li><a href="#">Ils confectionnent des barrages !</a></li>
<li><a href="#">Ils ont des grandes dents</a></li>
</ul>
</li>
<li>
<a href="#">Partie 2</a>
<ul class="sousMenu">
<li><a href="#">whisky</a></li>
<li><a href="#">vodka</a></li>
<li><a href="#">gin</a></li>
<li><a href="#">vin</a></li>
<li><a href="#">champagne</a></li>
</ul>
</li>
<li>
<a href="#">Partie 3</a>
<ul class="sousMenu">
<li><a href="#">pommes</a></li>
<li><a href="#">poires</a></li>
<li><a href="#">ananas</a></li>
<li><a href="#">pamplemousse</a></li>
<li><a href="#">banane</a></li>
<li><a href="#">raisins</a></li>
<li><a href="#">framboises</a></li>
<li><a href="#">fraises</a></li>
<li><a href="#">mirabelles</a></li>
<li><a href="#">groseilles</a></li>
</ul>
</li>
<li>
<a href="#">Partie 4</a>
<ul class="sousMenu">
<li><a href="#">tomates</a></li>
<li><a href="#">haricots</a></li>
<li><a href="#">carrottes</a></li>
<li><a href="#">choux</a></li>
<li><a href="#">concombres</a></li>
<li><a href="#">courgettes</a></li>
<li><a href="#">endives</a></li>
<li><a href="#">navets</a></li>
<li><a href="#">epinards</a></li>
<li><a href="#">avocat</a></li>
</ul>
</li>
</ul>

</body></html>

karmalo
11 mars 2009 à 13:17

je peux voir ton lien css?

sinon je n'ai pas tout compris je pense, tu veux ca https://css.developpez.com/tutoriels/menu-deroulant/menu01test.html ????

etiennosa Messages postés 128 Date d'inscription mardi 10 mars 2009 Statut Membre Dernière intervention 2 juin 2013 > karmalo
11 mars 2009 à 14:08

Non je veux dire que c'est sur le lien https://css.developpez.com/tutoriels/menu-deroulant/fichiers/menu01test.html que j'ai pris le code pour les menus deroulants mais lorsque je le teste je n'ai pas le meme resultat que ce qui est obtenu dans le tutoriel.
C'est a dire que je n'ai pas de menus deroulants mais des liens simples qui apparaissent verticalement.
Pardon, aidez moi

karmalo > etiennosa Messages postés 128 Date d'inscription mardi 10 mars 2009 Statut Membre Dernière intervention 2 juin 2013
11 mars 2009 à 14:21

tu as du loupé une étape en faisant ca
tu n'es pas très clair dans tes explications quand tu dis que j'obtiens de liens simples qui apparaissent verticalement. ca veut dire quoi que tes liens apparaissent en liste sans toute la décoration? car dans l'exemple que tu montres les liens apparaissent verticalement aussi.
j'ai une idée de ton problème mais avant tout je veux être sur de ce que tu demandes

etiennosa Messages postés 128 Date d'inscription mardi 10 mars 2009 Statut Membre Dernière intervention 2 juin 2013 > karmalo
11 mars 2009 à 21:23

Merci pour ta reponse. En faisant passer la souris sur un menu, il y a une liste cachée dans le menu qui se deroule normalement alors que dans mon cas c'est pas ca.
Tous les menus et les sous menus apparaissent sur la meme verticale. C'est a dire qu'on voit les menus et les sous menus en meme temps alors que les sous menu devraient etre cachés a moins qu'on ne fasse passer la souris sur un grand titre.
Pardon, j'attends toujours de l'aide.
Merci

karmalo > etiennosa Messages postés 128 Date d'inscription mardi 10 mars 2009 Statut Membre Dernière intervention 2 juin 2013
11 mars 2009 à 21:32

ok c'est ce qu'il me semblait donc à mon avis tu as du oublié de mettre le CSS c'est ce qui rend tout beau

voila le code HTML que tu vas mettre dans 1 er temps

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<link href="menu01.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>
<ul id="menuDeroulant">
<li>

<a href="#">Les castors</a>
<ul class="sousMenu">
<li><a href="#">Pelage doux mais robuste qu'on aime bien beaucoup</a></li>
<li><a href="#">Ils confectionnent des barrages !</a></li>
<li><a href="#">Ils ont des grandes dents</a></li>
</ul>
</li>

<li>
<a href="#">Partie 2</a>
<ul class="sousMenu">
<li><a href="#">whisky</a></li>
<li><a href="#">vodka</a></li>
<li><a href="#">gin</a></li>
<li><a href="#">vin</a></li>
<li><a href="#">champagne</a></li>
</ul>
</li>
<li>
<a href="#">Partie 3</a>
<ul class="sousMenu">
<li><a href="#">pommes</a></li>
<li><a href="#">poires</a></li>
<li><a href="#">ananas</a></li>
<li><a href="#">pamplemousse</a></li>
<li><a href="#">banane</a></li>
<li><a href="#">raisins</a></li>
<li><a href="#">framboises</a></li>
<li><a href="#">fraises</a></li>
<li><a href="#">mirabelles</a></li>
<li><a href="#">groseilles</a></li>
</ul>
</li>
<li>
<a href="#">Partie 4</a>
<ul class="sousMenu">
<li><a href="#">tomates</a></li>
<li><a href="#">haricots</a></li>
<li><a href="#">carrottes</a></li>
<li><a href="#">choux</a></li>
<li><a href="#">concombres</a></li>
<li><a href="#">courgettes</a></li>
<li><a href="#">endives</a></li>
<li><a href="#">navets</a></li>
<li><a href="#">epinards</a></li>
<li><a href="#">avocat</a></li>
</ul>
</li>
</ul>
</body>
</html>

Maintenant le code CSS, pour cela il faut que tu nommes ton fichier menu01.css
donc tu auras un fichier HTML nom peut importe et un fichier css que tu mettras dans un dossier
Avant tout, j'ai remarqué qu'il a mis des background image (url...), étant donné que tu ne les a pas, elles ne s'afficheront pas bien entendu
Au lieu d'effacer certains code en css tu mets au début /* et à la fin */ ca devient un commentaire
le code CSS est le suivant

body {
font : 11px verdana, sans-serif;
background : #afa99b url("fond.jpg") no-repeat top left;
margin : 0;
padding : 0;
}
#menuDeroulant {
background : #6a6458;
width : 644px;
height : 21px;
list-style-type : none;
margin : 0;
padding : 0;
border : 0;
}
#menuDeroulant li {
float : left;
width : 150px;
margin : 0;
padding : 0;
border : 0;
}
#menuDeroulant li a:link, #menuDeroulant li a:visited {
display : block;
height : auto;
color : #fff;
background : #3b4e77;
margin : 0;
padding : 4px 8px;
border-right : 1px solid #fff;
text-decoration : none;
}
#menuDeroulant li a:hover {
background-color : #f2462e;
}
#menuDeroulant li a:active {
background-color : #5f879d;
}
#menuDeroulant .sousMenu {
display : none;
list-style-type : none;
margin : 0;
padding : 0;
border : 0;
}
#menuDeroulant .sousMenu li {
float : none;
margin : 0;
padding : 0;
border : 0;
width : 149px;
border-top : 1px solid transparent;
border-right : 1px solid transparent;
}
#menuDeroulant .sousMenu li a:link, #menuDeroulant .sousMenu li a:visited {
display : block;
color : #fff;
margin : 0;
border : 0;
text-decoration : none;
/*background : transparent url("fondTR.png") repeat;*/
}
#menuDeroulant .sousMenu li a:hover {
background-image : none;
background-color : #f2462e;
}
#menuDeroulant li:hover > .sousMenu {
display : block;
}

Merci de me tenir au courant de la situation et n'hésite pas si tu as d'autres questions
karine

Discussions similaires

Suppression listes déroulantes

les entrées et les sortées

Supprimer liste déroulante Excel

mon ordi marque press the esc key for startup menu

Discussions similaires

Newsletters