salut quelque correction, je n'ai pas fais le css pour tout tes menus, je te laisse un peu travaillé ; pour les couleurs je te laisse libre choix. tu verras les modifs
pour le css
/**
* Menu déroulant v.8
* par Romain Berton
* pour www.alsacreations.com
* le 27/10/2007
*/
/* Propriétés globales */
html
{
font-family: Optima, "Trebuchet MS", Lucida, Arial, Geneva, Verdana, "Lucida Grande", Tahoma, Helvetica, sans-serif;
font-size: 100%;
background-color: white;
color: #225;
}
body
{
font-size: .85em;
margin: 20px;
}
#menus
{
position: relative;
width: 990px;
padding-left: 0;
/* Laisser le margin-top sinon ça buggue sur Opera 9.23 */
margin-left: 0;
list-style-type: none;
line-height: 2;
}
#menus a
{
display: block;
width: 10em;
height: 2.5em;
text-decoration: none;
text-indent: 1.1em;
}
#menus li
{
float: left;
margin: 0 2px;
padding: 0;
}
#menus li ul
{
width: 10em;
padding-left: 0;
margin-top: 0;
margin-left: 0;
list-style-type: none;
}
#menus ul li
{
margin: 1px 0;
filter: Alpha(opacity=90);
-moz-opacity : 0.9;
-khtml-opacity: 0.9;
opacity: 0.9;
}
/*-- à reproduire pour chaque menu --*/
#menus li.menu1 a, #menus li.menu1 ul a
{
background-color: red;
color: white;
}
#menus li.menu1 a:hover, #menus li.menu1 ul a:hover
{
background-color: #FF8078;
color: white;
}
#menus li.menu2 a, #menus li.menu2 ul a
{
background-color: blue;
color: white
}
#menus li.menu2 a:hover, #menus li.menu2 ul a:hover
{
background-color: #718EFF;
color: white
}
/* Propriétés actives lorsque JS actif */
/*--- à faire pour chaque menu ---*/
#menus li.menu1 a.focusTitle
{
color: #000;
background-color: #FF8078;
}
#menus li.menu2 a.focusTitle
{
color: #000;
background-color: #718EFF;
}
/*--- rien toucher ci dessous --*/
#menus .Montre
{
position: absolute;
}
#menus .Cache
{
display: none;
}
.over /* Classe ajoutée sur la div qui suit le menu pour supprimer le margin-top lorsque JS est actif */
{
margin: 0 20px;
}
/* Test de superposition */
div /* Margin-top nécessaire pour éviter la superposition avec les items du menu lorsque JS est inactif */
{
padding: 1em 0;
margin: 16em 20px 0;
clear: both;
}
h1
{
font-size: 1em;
color: #12cea5;
}
h2
{
font-size: 1em;
color: #acde58;
margin-bottom: 10px;
}
pour le html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Menu déroulant v.8
par Romain Berton
pour www.alsacreations.com
le 27/10/2007
-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="content-language" content="fr" />
<title>Menu déroulant Alsacréations v.8 (horizontal/survol/transparent)</title>
<link rel="stylesheet" media="screen, projection" type="text/css" href="styleMenu.css" title="styleMenu" />
<script type="text/javascript" src="scriptMenu.js"></script>
</head>
<body>
<h1>Menu déroulant Alsacréations v.8 (horizontal/survol/transparent)</h1>
<ul id="menus">
<li class="menu1">Accueil
<ul>
<li><a href="#">lien1</a></li>
<li><a href="#">lien2</a></li>
<li><a href="#">lien3</a></li>
<li><a href="#">lien4</a></li>
<li><a href="#">lien5</a></li>
</ul>
</li>
<li class="menu2">Hébergement
<ul>
<li><a href="#">lien1</a></li>
<li><a href="#">lien2</a></li>
</ul>
</li>
<li class="menu3">Patrimoine
<ul>
<li><a href="#">lien1</a></li>
<li><a href="#">lien2</a></li>
<li><a href="#">lien3</a></li>
<li><a href="#">lien4</a></li>
</ul>
</li>
<li id="menu4">Evènements
<ul>
<li><a href="#">lien1</a></li>
<li><a href="#">lien2</a></li>
<li><a href="#">lien3</a></li>
</ul>
</li>
<li class="menu5">Vie pratique
<ul>
<li><a href="#">lien1</a></li>
<li><a href="#">lien2</a></li>
<li><a href="#">lien3</a></li>
</ul>
</li>
<li class="menu6">Loisirs / Sport
<ul>
<li><a href="#">lien1</a></li>
<li><a href="#">lien2</a></li>
<li><a href="#">lien3</a></li>
</ul>
</li>
<li class="menu7">Contacts
<ul>
<li><a href="#">lien1</a></li>
<li><a href="#">lien2</a></li>
<li><a href="#">lien3</a></li>
</ul>
</li>
</ul>
<div>
<h2> </h2>
</div>
</body></html>
.
