menu déroulant largeurs variables sans JS

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : menu déroulant largeurs variables sans JS

Zoltan32

Bonjour à tous !

Comme mon titre l'indique je souhaiterais réaliser un ménu déroulant qui fonctionne sans javascript, du moins sous Firefox.
Jusque-là ça va. Le souci c'est que le menu va être administrable, ce qui impose que les largeurs ne doivent pas être fixées.

Quand j'ai au moins 2 sous-menus dans 1 menu parent, ça passe. Mais quand je n'en ai qu'un seul, le "li" ne s'adapte pas à la largeur de son parent (alors qu'il a un width:100%).

Voilà le code en question :

Code :

<!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" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style type="text/css">
html,body,a,ul,li{margin:0;padding:0}
body{ font-family:Arial,Verdana,sans-serif; font-size:12px; line-height:1}
/* ---------- MENU ----------- */
.menu{
float:left;
width:100%;
margin-bottom:26px;
background:#B4ADB5;
}
.menu li{
list-style:none;
float:left;
position:relative;
text-align:center;
}
.menu a{
color:#fff;
padding:9px 18px 10px 18px;
display:block;
}
/* ------ MENU SECOND NIVEAU-------- */
.menu li ul{
background:#fff;
position:absolute;
color:#906C69;
display:none;
border:2px solid #B4ADB5;
border-top:none;
z-index:200;
}
.menu li:hover{
background:#fff;
}
.menu li:hover a{
color:#906C69;
border:2px solid #B4ADB5;
border-bottom:none;
padding:7px 16px 10px 16px;
}
.menu li a:hover{
background:#EDE8E7;
}
.menu li:hover ul li a{
color:#906C69;
border:none;
margin:0;
background:#fff;
}
.menu li ul li a:hover{
background:#EDE8E7;
margin:0;
}
.menu li:hover ul{
display:block;
}
.menu li ul li{
width:100%;
height:29px;
}
.menu li ul li a{
color:#906C69;
}
</style>
</head>
<body>
<ul class="menu">
<li><a href="#">Qu'est-ce que le projet Bidule ?</a>
<ul>
<li><a href="#">Les enjeux</a></li>
<li><a href="#">Les objectifs</a></li>
<li><a href="#">Les intérêts</a></li>
</ul>
</li>
<li><a href="#">Les porteurs du projet</a>
<ul>
<li><a href="#">Nos partenaires</a></li>
</ul>
</li>
<li><a href="#">L'annuaire des acteurs du projet</a></li>
</ul>
</body>
</html>

Si finalement, je dois utiliser du JS ça n'est pas trop grave... J'aimerais juste savoir si c'est possible sans.

Merci d'avance pour vos réponses.

Publicité

aspirateur

Salut,

dans

.menu li ul{
background:#fff;
position:absolute;
color:#906C69;
display:none;
border:2px solid #B4ADB5;
border-top:none;
z-index:200;
}

rajoute : width:100%;

Par contre tu risque d'avoir un décalage puisqu'il y a des border

Message édité par aspirateur le 27-04-2010 à 12:11:47

FORUM HardWare.fr

Programmation

HTML/CSS

menu déroulant largeurs variables sans JS

Sujets relatifs
JS affichage de news les unes après les autres	Menu "Cloud"
flash/php passage de variables	Menu "animé" et très large. Flash ? Pas flash ?...
affichage d'un menu	envoyer un email différent sur résultars menu déroulant
JS - XHTML - question sur onmouseover	[BATCH] Comment formatter des noms de variables dans un loop ?
Variables dynamique
Plus de sujets relatifs à : menu déroulant largeurs variables sans JS

Page générée en 0.050 secondes