nizouille
dimanche 16 janvier 2005 à 11:31
Voici ma css
CODE
/*navigation menu*/
div#nav {
float: left;
padding: 8px;
margin-top: 5px;
width: 99px;
voice-family: "\"}\"";
voice-family: inherit;
width: 115px;
}
div#nav ul {
margin: 0px;
padding: 0px;
background: white;
width: 115px;
}
div#nav li {
position: relative;
list-style: none;
margin: 0;
background: white;
padding: 0px;
border-bottom: 3px solid #FFF;
}
div#nav li:hover {
background: #B6C5D6;
}
div#nav li.submenu {
height:26px;
width: 118px;
font-size: 13px;
background: url('images/bouton.gif') no-repeat 4px 0;
}
div#nav li.submenu:hover {
background: url('images/bouton.gif') no-repeat 4px -26px;
}
div#nav li.subsubmenu {
width: 150px;
background-color: #FFF;
}
div#nav li.subsubmenu:hover {
background-color: #B6C5D6;
}
div#nav li.subsubsubmenu {
width: 150px;
background-color: #E7ECF1;
}
div#nav li.subsubsubmenu:hover {
background-color: #B6C5D6;
}
div#nav li a {
display: block;
padding: 0.25em 0 0.25em 0.5em;
text-decoration: none;
}
div#nav li a:hover {
display: block;
color : #FFF;
}
div#nav>ul a {
width: auto;
}
div#nav ul ul {
position: absolute;
top: 0;
left: 118px;
display: none;
border: 1px dashed #79C;
}
div#nav ul ul ul{
position: absolute;
top: 0;
left: 150px;
display: none;
}
div#nav ul.level1 li.submenu:hover ul.level2,
div#nav ul.level2 li.submenu:hover ul.level3 {
display:block;
font-size: 11.5px;
width: 150px;
}
div#nav ul.level1 li.subsubsubmenu:hover ul.level2,
div#nav ul.level2 li.subsubmenu:hover ul.level3 {
display:block;
font-size: 11.5px;
width: 150px;
}
Voici mon menu :
CODE
<div id="nav">
<ul class="level1">
<li class="submenu"><a href="">Contact</a>
<ul class="level2">
<li><a href="/contact/equipe_enseignons.php">Equipe d'Enseignons</a></li>
<li><a href="/contact/support_technique.php">Support Technique</a></li>
<li><a href="/contact/relations_publiques.php">Relations Publiques</a></li>
</ul>
</li>
<li class="submenu"><a href="">Aide</a>
<ul class="level2">
<li><a href="/aide/comment-ca-fonctionne.php">Premiers pas</a></li>
<li><a href="/aide/plan-du-site.php">Plan du site</a></li>
<li><a href="/aide/questions-frequentes.php">Questions Fréquentes</a></li>
<li><a href="/aide/aide-en-ligne.php">Aide en ligne</a></li>
</ul>
</li>
</ul>
Par exemple. Le problème sous IE 5.5 est que le menu sort totalement de la div, alors que sous IE 5.0, c'est carrément l'intérieur du menu qui part en vrille

Merci sibélius