> Tous les forums > Forum des Webmasters
 menu déroulant - petit soucisSujet résolu
Ajouter un message à la discussion
Page : [1] 
Page 1 sur 1
fredonzenet
  Posté le 18/08/2010 @ 00:03 
Aller en bas de la page 
Petit astucien

Bonjour,

voilà, j'ai repris un code permettant de faire un menu déroulant
et ça fonctionne.

Mais malgré du temps passé dessus, je n'arrive pas à ce que les
sous-menu s'affichent en face de son menu appelant et
non une ligne en dessous comme actuellement.



Voici le code MenuVer.css correspondant que je n'arrive pas à faire ce que je veux :
<STYLE>

ul.menu {
list-style-type: none;
display: none;
font-family: Arial;
font-size: 9pt;
font-weight:bold;

}
ul.menu ul {
position: absolute;
display: none;
list-style-type: none;
left: 290px;
font-family: Arial;
font-size: 9pt;
font-weight:bold;

}
ul.menu li a:link, ul.menu li a:visited {
display: block;
color: #ffffff;
background: #3c56d2;
width: 300px;
text-decoration: none;
list-style-type: none;
font-family: Arial;
font-size: 9pt;
font-weight:bold;

vertical-align:middle;
}

ul.menu li a:hover {
background: #009fe1;
list-style-type: none;
font-family: Arial;
font-size: 9pt;
font-weight:bold;

}

ul.menu li:hover > ul {
display: block;
list-style-type: none;
font-family: Arial;
font-size: 9pt;
font-weight:bold;

}
ul.menu a {
border: 1px #ffffff solid;
list-style-type: none;
font-family: Arial;
font-size: 9pt;
font-weight:bold;

}
.menu{
list-style-type: none;

}
</STYLE>



et voici le petit prog en lui même :

<head>
<title>Menu Vertical
</title>
<link rel="stylesheet" type="text/css" href="MenuVer.css" />
</head>
<body>
<ul class="menu">
<li>
<a href="#">Un</a>

<ul>
<li><a href="#">Niveau 1.1</a></li>
<li><a href="#">Niveau 1.2</a></li>
</ul>
</li>
<li>
<a href="#">Deux</a>

<ul>
<li><a href="#">Niveau 2.1</a>
<ul>
<li><a href="#">Niveau 2.1.1</a></li>
<li><a href="#">Niveau 2.1.2</a></li>
</ul>
</li>

<li><a href="#">Niveau 2.2</a></li>
<li><a href="#">Niveau 2.3</a></li>
</ul>
</li>
</ul>
</body>
</html>

Si vous avez une idée lumineuse, je suis preneur !!

Merci d'avance !

Cordialement

Fred



Modifié par fredonzenet le 19/08/2010 17:15
Publicité
elle
 Posté le 18/08/2010 à 00:50 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Tu l'as testé sous IE?

elle
 Posté le 18/08/2010 à 00:53 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Et si tu mets display:none à ul.menu, ben ça r'garde mal, c'est le cas de l'dire!

elle
 Posté le 18/08/2010 à 01:21 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Avec un top:40px; , ça fonctionne pour le un.

elle
 Posté le 18/08/2010 à 01:23 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Bon, j'arrête de soliloquer et je vais faire la vaisselle.

Dreamer
 Posté le 18/08/2010 à 06:18 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

elle a écrit :

Bon, j'arrête de soliloquer et je vais faire la vaisselle.

et le ménage, tu le garde en stock ??

fredonzenet
 Posté le 18/08/2010 à 09:08 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

suis sous firefox ça fonctionne et rien apparait du tout sur IE, mais ce n'est pas le problème, IE je m'en fiche !!

Damned, pas d'idée car ça fait 2 jours que je sèche...!?

fredonzenet
 Posté le 18/08/2010 à 09:10 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

suis d'accord pour le top:40px, en fait il faudrait pouvoir lui dire

dans ul.menu ul :

position: "absolute + 40px" où un truc du genre !

fredonzenet
 Posté le 19/08/2010 à 16:01 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

ça y est j'ai enfin trouvé !


il suffisait de mettre dans ul.menu ul :


margin: -18px 0px 0px 0px;

merci en tout cas pour vos réponses !



Modifié par fredonzenet le 19/08/2010 17:11
Publicité
elle
 Posté le 19/08/2010 à 17:14 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

ul.menu ul {
position: absolute;
display: none;
list-style-type: none;
left: 290px;
top: 40px;
font-family: Arial;
font-size: 9pt;
font-weight:bold;
}
Page : [1] 
Page 1 sur 1

Vous devez être connecté pour participer à la discussion.
Cliquez ici pour vous identifier.

Vous n'avez pas de compte ? Créez-en un gratuitement !
Recevoir PC Astuces par e-mail


La Lettre quotidienne +226 000 inscrits
Avec l'actu, des logiciels, des applis, des astuces, des bons plans, ...

Les bonnes affaires
Une fois par semaine, un récap des meilleurs offres.

Les fonds d'écran
De jolies photos pour personnaliser votre bureau. Une fois par semaine.

Les nouveaux Bons Plans
Des notifications pour ne pas rater les bons plans publiés sur le site.

Les bons plans du moment PC Astuces

Tous les Bons Plans
89,99 €Caméra de sécurité connectée Blink Outdoor à 89,99 €
Valable jusqu'au 11 Mai

Amazon fait une belle promotion sur sa caméra de sécurité connectée Blink Outdoor qui passe à 89,99 € livrée gratuitement au lieu de 120 € habituellement. Gardez l'esprit tranquille avec cette caméra polyvalente sans fil pour l'extérieur, dotée d'une autonomie de 2 ans (piles au lithium fournies), d’un système audio bidirectionnel, de la détection de mouvements personnalisable, de la vision nocturne infrarouge et de l’enregistrement en direct en Full HD 1080p dans le cloud (via un abonnement) ou en local (en branchant directement un périphérique de stockage USB sur la base de synchronisation fournie).

Cette caméra est accompagnée d'un module de synchronisation (avec votre réseau WiFi) et fonctionne directement. Notez que les lots de plusieurs caméras sont également en promotion : 2 caméras à 164,99 € (82,49 € par caméra), 3 caméras à 224,99 € (74,99 € / caméra) et 4 caméras à 284,99 € (71,25 € / caméra).


> Voir l'offre
13,99 €Clé USB Sandisk Ultra 64 Go à double connectique USB 3.1 Type A et C à 13,99 €
Valable jusqu'au 11 Mai

Amazon fait une promotion sur la clé USB Sandisk Ultra 64 Go à double connectique USB 3.1 Type A et C qui passe à 13,99 € alors qu'on la trouve ailleurs à plus de 25 €. Cette clé USB  dispose d'un connecteur réversible USB Type C et d'un connecteur classique de type A. Grâce à elle, transférez en toute simplicité et rapidement (jusqu'à 150 Mo/s) vos fichiers entre vos smartphones, tablettes et ordinateurs. 


> Voir l'offre
9,99 €Bloc multiprise parasurtenseur BRENNENSTUHL 8 prises à 9,99 €
Valable jusqu'au 11 Mai

Cdiscount fait une promotion sur le bloc multiprise parasurtenseur BRENNENSTUHL avec 8 prises à orientation inversée qui passe à 9,99 € au lieu de 20 €. Le câble fait 1,4 m.


> Voir l'offre

Sujets relatifs
Target dans menu déroulant "option value=...." html
Menu déroulant devenu inactif
menu deroulant vertical
centrer mon menu deroulant
aide pour menu déroulant
menu déroulant pas en place!
menu déroulant. : décalage sous-menu
Menu déroulant en css
souci d'include et/ou de menu déroulant
menu déroulant récalcitrant
Plus de sujets relatifs à menu déroulant - petit soucis
 > Tous les forums > Forum Forum des Webmasters