salut a tous,
j'ai fait un menu, mais il y a un problème de dimension lorsque un mot du menu est trop long...jugez par vous même:
http://tosweb.free.fr/Nouveau%20dossier2/m...nuVertical.html
lorsque vous allez sur "Imprimantes">>"Deskjet">>vous pouvez constater que en allant sur tous les liens, le fond bleu n'est pas a la bonne dimension, je voudrai qu'il prenne tout l'espace disponible et ce quel que soit la taille de la cellule.
voici mon CSS:
| CODE |
| /* CSS du menu vertical*/
.menur{
position:relative;
/* solve a Opera7/IE display bug */
width:100px;
width/**/:100px;
margin:0;
padding:0;
}
.menur span{
display:none;
}
.menur li ul{ /*encadre second menu*/
border: 1px dotted #386289;
margin:0;
padding:0;
position:absolute; /* important */
width:100px;
width/**/:100px;
margin-left:100px; /* be careful */
margin-top:-18px;
}
.menur li ul{
visibility:hidden;
}
.menur li ul ul{ /*encadre troisieme menu*/
border: 1px dotted #386289;
margin-left: 100px;
padding:0;
position:absolute; /* important */
width:100px;
width/**/:100px;
}
.menur li ul ul{
visibility:hidden;
}
.menur a{ /*tout premier menu*/
display:block;
width:100px;
margin:0;
padding:1px 0 1px 20px; /* em units can creat little graphic bug in mozilla */
font-family: Arial;
font-size: 8pt;
color: #386289;
font-weight: bold;
text-decoration: none;
}
.menur a:hover{
text-decoration: underline;
}
/* for a mozilla better display with key nav */
.menur a:focus{
background-color: white;
}
.menur span{
/* hide some accessibility stuff */
display:none;
}
.menur li{ /*contenu premier menu*/
width:100px;
display:block;
float:left;
margin: 0;
padding:0;
background-image: url(fleche2.gif);
background-repeat: no-repeat;
background-position: 2% 65%;
background-color: white;
}
.menur li:hover{
}
.menur li li{ /*contenu second et troisième menu*/
width:100px;
width/**/:100%;
display:block;
float:left;
list-style: none;
background: white;
}
.menur li li a:hover {
background: #DBE4F1;
background-image: url(fleche3.gif);
background-repeat: no-repeat;
background-position: 5% 65%;
}
/* IE PC selector */
* html .menur li {
display:inline; /* solve a IE PC list bug */
float:none; /* solve a IE5 clav nav bug */
} |
et le HTML:
| CODE |
| <html>
<head>
<title>Menu déroulant vertical à plusieurs niveaux en DHTML</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<meta name="Robots" content="follow" />
<meta name="MSSmartTagsPreventParsing" content="TRUE" />
<!-- script du menu -->
<script type="text/javascript" src="dynMenu.js"></script>
<!-- détéction du navigateur -->
<script type="text/javascript" src="browserdetect.js"></script>
<!-- important pour que les vieux navigateurs ne comprennent pas le CSS -->
<style type="text/css">
@import "menuv.css";
@import "base.css";
</style>
</head><body>
<!-- liste imbriquée de liens qui fera office de menu -->
<ul id="menur">
<li><a href="#menu1">Ecrans</a>
<ul>
<li><a href="#">LCD</a><ul>
<li><a href="#">17 pouces</a></li>
<li><a href="#">19 pouces</a></li>
<li><a href="#">20 pouces</a></li>
</ul>
</li>
<li><a href="#">CRT</a>
<ul>
<li><a href="#">17 pouces</a></li>
<li><a href="#">19 pouces</a></li>
<li><a href="#">20 pouces</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#menu1">Imprimantes</a>
<ul>
<li><a href="#">Laser</a><ul>
<li><a href="#">Sony</a></li>
<li><a href="#">Toshiba</a></li>
<li><a href="#">IIYama</a></li>
</ul>
</li>
<li><a href="#">Deskjet</a>
<ul>
<li><a href="#">HP</a></li>
<li><a href="#">Canon</a></li>
<li><a href="#">philipssssssssssssssssssssssssss</a></li>
<li><a href="#">HP</a></li>
<li><a href="#">Canon</a></li>
<li><a href="#">philips</a></li>
<li><a href="#">HP</a></li>
<li><a href="#">Canon</a></li>
<li><a href="#">philips</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<script type="text/javascript">
initMenu();
</script>
</body></html> |
MERCI BCP POUR VOTRE AIDE!
ps: si vous voyez d'autres problèmes n'hesitez pas en m'en faire part.[/code]
