|
 Posté le 18/08/2010 @ 00:03 |
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 |
|
|
|
|
|
Posté le 18/08/2010 à 00:50 |
 Grande Maîtresse astucienne |  Tu l'as testé sous IE? 
|
|
Posté le 18/08/2010 à 00:53 |
Grande Maîtresse astucienne | Et si tu mets display:none à ul.menu, ben ça r'garde mal, c'est le cas de l'dire!  |
|
Posté le 18/08/2010 à 01:21 |
Grande Maîtresse astucienne | Avec un top:40px; , ça fonctionne pour le un. |
|
Posté le 18/08/2010 à 01:23 |
Grande Maîtresse astucienne | Bon, j'arrête de soliloquer et je vais faire la vaisselle. |
|
Posté le 18/08/2010 à 06:18 |
 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 ?? 
|
|
Posté le 18/08/2010 à 09:08 |
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...!?
|
|
Posté le 18/08/2010 à 09:10 |
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 ! |
|
Posté le 19/08/2010 à 16:01 |
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 |
|
Posté le 19/08/2010 à 17:14 |
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;
}
|
|
menu déroulant - petit soucis
À LA UNE
PRATIQUE
LOGITHÈQUE
TABLETTE ET MOBILE
BONS PLANS
FONDS D'ÉCRAN
JEUX
FORUM
