Bonjour a tous,
je suis en train de faire un menu déroulant pour un intranet. J'ai voulu le faire en CSS afin de me passer du JavaScript pour ce menu. Après tous mes efforts je teste et surprise, il fonctionne sous IE7 mais pas sous FireFox 3 ! J'entends par 'fonctionner' le fait de passer la souris au dessus des rubriques pour en dérouler le contenu. le hover semble marcher sous Firefox (la couleur des rubriques change) mais il ne me déroule pas le sous menu.... Quelqu'un aurait une idée ? Merci a tous !
Code Html :
Code CSS :
Modifié par manu-lyon (06 May 2009 - 19:07)
je suis en train de faire un menu déroulant pour un intranet. J'ai voulu le faire en CSS afin de me passer du JavaScript pour ce menu. Après tous mes efforts je teste et surprise, il fonctionne sous IE7 mais pas sous FireFox 3 ! J'entends par 'fonctionner' le fait de passer la souris au dessus des rubriques pour en dérouler le contenu. le hover semble marcher sous Firefox (la couleur des rubriques change) mais il ne me déroule pas le sous menu.... Quelqu'un aurait une idée ? Merci a tous !
Code Html :
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>- Intranet IMJWEB - Accueil -</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
<ul id="menu">
<li><a href="#">Interventions</a></li>
<ul class="sousmenu">
<li><a href="#">Créer un ticket</a></li>
<li><a href="#">Liste des tickets</a></li>
<li><a href="#">Créer un compte rendu</a></li>
<li><a href="#">Recherche un compte rendu</a></li>
<li><a href="#">Gestion du planning</a></li>
</ul>
<li><a href="#">Clients</a></li>
<ul class="sousmenu">
<li><a href="#">Ajouter un client</a></li>
<li><a href="#">Liste des clients</a></li>
<li><a href="#">Recherche un client</a></li>
<li><a href="#">Liste des contacts</a></li>
</ul>
<li><a href="#">Statistiques</a></li>
<ul class="sousmenu">
<li><a href="#">Production</a></li>
<li><a href="#">Temps moyen de traitement</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Codes sources</a></li>
<li><a href="#">Site web</a></li>
</ul>
<li><a href="#">Technique</a></li>
<ul class="sousmenu">
<li><a href="#">Base de codes</a></li>
<li><a href="#">Liens utiles</a></li>
<li><a href="#">gestion des techniciens</a></li>
</ul>
</ul>
</div>
<div id="middle">
ici c'est le milieu
</div>
<div id="footer">
ici c'est le footer
</div>
</body>
</html>
Code CSS :
@charset "utf-8";
/* CSS Document */
body{
padding:0;
margin:0;
}
#header{
background:url(img/logo_recadre.jpg) no-repeat;
height:100px;
}
/* MENU */
#menu{
list-style-type:none;
margin:0;
padding:0;
border:0;
}
#menu li{
float:left;
margin:0;
padding:0;
border:0;
width:200px;
}
#menu .sousmenu li{
float:none;
border:0;
margin:0;
padding:0;
}
#menu .sousmenu{
list-style-type:none;
margin:0;
padding:0;
border:0;
display:none;
}
#menu li a:link, #menu li a:visited{
font-size : 20px;
display:block;
height:1%;
background:#999999;
border-right:1px solid transparent;
margin:0;
padding: 4px 20px ;
text-decoration:none;
}
#menu li a:hover{
background-color:#666666;
}
#menu .sousmenu li {
display:block;
margin:0;
border:0;
border-top:1px solid transparent;
}
#menu .sousmenu li a{
font-size : 15px;
}
#menu li:hover > .sousmenu{
display: block;
}
Modifié par manu-lyon (06 May 2009 - 19:07)