Bonjour,
Voila, j'ai crée un menu déroulant a partir d'un code trouvé dans un livre que je viens d'acquérir. Ensuite j'ai du mettre des z-index sur certains blocs pour que le menu deroulant passe par dessus les blocs et non par en-dessous.
Seulement voilà, si tout marche sur Firefox, IE et Netscape, ca deconne sur Opera 8.5.
Je n'arrive pas à voir d'où vient le probleme. Une idée ?
Modifié par maryline (26 Oct 2005 - 22:52)
Voila, j'ai crée un menu déroulant a partir d'un code trouvé dans un livre que je viens d'acquérir. Ensuite j'ai du mettre des z-index sur certains blocs pour que le menu deroulant passe par dessus les blocs et non par en-dessous.
Seulement voilà, si tout marche sur Firefox, IE et Netscape, ca deconne sur Opera 8.5.
Je n'arrive pas à voir d'où vient le probleme. Une idée ?
.fond{
background-image:url(violet.gif);
background-position:center center;
background-repeat:repeat-y;
height:890px;
}
.haut{
width:648px;
margin-left:auto;
margin-right:auto;
background-image:url(Hautcrique.jpg);
background-position:center;
background-repeat:no-repeat;
height:259px;
}
.b3{
z-index:1;
position:absolute;
left: 621px;
top: 306px;
background-color:#DDD6DE;
width: 168px;
height: 180px;
}
.b4{
z-index:1;
position:absolute;
background-color:#DDD6DE;
left: 185px;
top: 306px;
width: 410px;
height: 180px;
}
div#listmenu{
margin-left:147px;
font-size:1em;
text-align:left;
}
div#listmenu ul{
margin:0 0 0 30px;
}
div#listmenu li{
z-index:3;
float:left;
position:relative;
list-style-type:none;
background-color:#f1cbf6;
padding:0 6px;
border-right:1px solid #fff;
}
div#listmenu li:hover{
background-color:#fff;
}
div#listmenu a{
display:block;
padding:0 6px;
text-decoration:none;
color:#606060;
font-weight:bold;
}
div#listmenu a:hover{
color:black;
font-weight:bold;
}
div#listmenu li:first-child{
border-left:1px solid #fff;
}
div#listmenu ul li ul{
margin:0;
position:absolute;
width:10em;
left:-1px;
}
div#listmenu ul li ul li{
width:100%;
border-left:1px solid #fff;
border-bottom:1px solid #fff;
border-right:1px solid #fff;
}
div#listmenu ul li ul li:first-child{
border-top:1px solid #fff;
}
body div#listmenu ul li ul{
display:none;
}
div#listmenu ul li:hover ul, div#listmenu ul li ul:hover{
display:block;
}
*html div#listmenu ul li ul{
border-top:1px solid #fff;
border-left:0px;
}
<body>
<div class="fond">
<div class="haut"></div>
<div class="b3"></div>
<div id="listmenu">
<ul>
<li><a href="parcours.php">Parcours</a>
<ul>
<li><a href="parcours.php">blabla</a></li>
<li><a href="parcours.php">blabla</a></li>
</ul>
</li>
<li><a href="competences.php">Compétences</a>
<ul>
<li><a href="competences.php">compétences</a></li>
<li><a href="competences.php">compétences</a></li>
</ul>
</li>
</ul>
</div>
<div class="b4">
<h1>Bienvenue !</h1>
<p>Ce site a pour vocation ....</p>
</div>
</div> <!--fin fond -->
</body>
Modifié par maryline (26 Oct 2005 - 22:52)