bonjour,
je bloque sur un petit pb
voila j'ai recupere un menu déroulant vertical qui utilise un fichier .htc, le pb c'est que les sous menus empietent sur le corps du site.
Tout se passe bien sur ie mais sur firefox, impossible d'acceder au sous menu avec la souris dès que ce dernier apparait au niveau du corps du site !!!
c'est un peu compliqué donc je met le code css :
body {
behavior:url("menu.htc");/*permet de faire des menu deroulants*/
background-color: #FFFFCC;
margin:0;
padding:0;
width:960px;
height:550px;
}
#menu {
width:200px;
height:350px;
background-color: #666666;
float: left;
}
/* Le corps de la page */
#centre{
height: 480px;
padding: 4px;
overflow: auto;
border-top: 1px solid #999999;
border-right: 1px none #999999;
border-bottom: 1px none #999999;
border-left: 1px solid #999999;
position: static;
}
/* the menu */
ul,li,a {
display:block;
border:0;
margin:0;
padding:0;
}
ul {
width:160px;/*LONGUEUR CONTENEUR UL */
border:1px solid #000000;/*BORDURE NOIRE DU CONTENEUR UL*/
background:#00FF99;/*COULEUR CONTENEUR vert*/
list-style:none;/*pas de style de liste */
}
li {
position:relative;
padding:1px;
padding-left:2px;/*DISTANCE A GAUCHE DES MENUS DANS LE CONTENEUR UL*/
z-index:2;/*passe en premier plan - plus le nombre est grand p/r au autre plus il est premier plan */
}
a {
padding:2px;
border:1px solid white;
text-decoration:none;
color:white;
font-weight:bold;
width:150px; /* IE permet d'agrandir la zone de lien*/
background-color: gray;/**/
}
li.rubrique a:hover {
background-color:#CCCCCC;/* au survol couleur change */
color:black;
}
li.rubrique ul {
position:absolute;
left:120px; /* IE decale le sous menu a 120pc du bord du div menu*/
top:5px;/* decale le menu a 5px du haut du menu superieur*/
}
/* hovers with specificity */
li.rubrique:hover { z-index:3; }/*passe le li sur survol en premier plan p/r au li */
/*fait disparaitre les sous menus*/
ul ul, ul ul ul, li:hover ul ul{
display:none;
}
/*fait apparaitre les sous menus au survol*/
li:hover ul, li:hover li:hover ul{
display:block;
}
et le code de la page index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Menu vertical deroulant 4 - avec htc </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" media="screen" title="Basique" href="menu-vert5.css" />
</head>
<body>
<div id=menu>
<ul>
<li class="rubrique">
<a href="#" title="Ville">Ville</a>
</li>
<li class="rubrique">
<a href="#" title="Animaux">Animaux</a>
<ul>
<li class="rubrique"> <a href="#" title="Chat">Chat</a>
<ul>
<li class="rubrique"> <a href="#" title="Chat">Chaton1</a></li>
<li class="rubrique"> <a href="#" title="Elephant">Chaton2</a></li>
</ul>
</li>
<li class="rubrique"> <a href="#" title="Elephant">Elephant</a></li>
<li class="rubrique"> <a href="#" title="Tigre">Tigre</a></li>
<li class="rubrique"> <a href="#" title="Singe">Singe</a></li>
</ul>
</li>
<li class="rubrique">
<a href="#" title="Hobbie">Hobbie</a>
<ul>
<li class="rubrique"> <a href="#" title="Canevas">Canevas</a>
<ul>
<li class="rubrique"><a href="#" title="Paysage">Paysage</a></li>
<li><a href="#" title="Animaux">Animaux</a></li>
<li><a href="#" title="Nature morte">Nature morte</a></li>
</ul>
</li>
<li class="rubrique"> <a href="#" title="Couture">Couture</a>
<ul>
<li><a href="#" title="A l'enfillade">A l'enfillade</a></li>
<li><a href="#" title="A l'exfillade">A l'exfillade</a></li>
</ul>
</li>
<li class="rubrique"> <a href="#" title="Cuisine">Cuisine</a>
<ul>
<li><a href="#" title="Couscous">Couscous</a></li>
<li><a href="#" title="Paella">Paella</a></li>
<li><a href="#" title="Gigot">Gigot</a></li>
<li><a href="#" title="Tomates farcies">Tomates farcies</a></li>
</ul>
</li>
<li class="rubrique"> <a href="#" title="Collection">Collection</a>
<ul>
<li><a href="#" title="Timbres">Timbres</a></li>
<li><a href="#" title="Pedalos">Pedalos</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div id="centre">
ceci est le centre
</div>
</body>
</html>
D'avance merci de vos réponses
sandrine
|
) Je ne connais pas ce menu et *.htc est prévu pour IE si je ne m'abuse mais si ça cause un problème sous Firefox ...
Les références web : openweb.eu.org - opquast.com - webmaster-hub.com - webrankinfo.com - salemioche.net - web-pour-tous.org - webonorme.org