voila, j'ai un menu déroulant utilisant un rollover sur la couleur du texte avec les feuilles de style, en utilisant le principe .classe H1/hover{blabla}. Le seul probleme c'est qu'il semble que cette méthode ne fonctionne pas sous IE, est ce une erreur de ma part où il y a t'il un autre moyen pour changer la couleur du texte sur un rollover ??
voici le code du menu
<html>
<head>
<title>Menu test</title>
<link rel="stylesheet" type="text/css" href="menufinal.css" media="screen" />
</head>
<body>
<table width=143 border=0 borderColor=#FFFFFF cellSpacing=0 cellPadding=0>
<!-- PREMIER MENU -->
<tr><td>
<div id="menu1" class="Menu_corp">
<ul> <h1 onClick="t_menu('menu1')"">ETABLISSEMENT</h1>
<li><a href="/">test1</a></li>
<li><a href="/">test2</a>
</li>
</ul>
</div>
</td></tr>
<tr><td bgcolor=#FFFFFF></tr></td>
</table>
<script type="text/javascript">
t_menu('menu1');
t_menu('menu2');
t_menu('menu3');//Pour que le menu soit fermé au lancement
function t_menu(nom)
{
if ( document.getElementById(nom).className == "Menu_corp" )
document.getElementById(nom).className="Menu_corp_hide";
else
document.getElementById(nom).className="Menu_corp";
}
</script>
</body>
</html>
et la feuille de style associée (en mode non déplié)
/* options du calque en mode invisible*/
.Menu_corp_hide{
width: 143px;
background-image:url("images/menu.jpg");
background-repeat:no-repeat;
}
/* options du texte du menu en mode invisible */
.Menu_corp_hide h1{
margin-bottom:0px;
font-family: "Arial;"
FONT-WEIGHT: bold;
FONT-SIZE: 14px;
color: #FFFFFF;
}
/* roll-over du texte du menu en mode invisible, seulement sous Firefox ! */
.Menu_corp_hide h1:hover{
margin-bottom:0px;
font-family: "Arial;"
FONT-WEIGHT: bold;
FONT-SIZE: 14px;
color: #cccccc;
}
/* options permettant de replier le menu */
.Menu_corp_hide li{
display: none;
}
/* options de la liste à puce en mode invisible */
.Menu_corp_hide ul{
text-indent: -20;
list-style-position: outside;
margin-top:0px;
margin-bottom:0px;
}