Double menu

Bonjour,

J'ai un petit problème que je n'arrive pas à résoudre.

J'ai un menu en CSS basé sur une UL, qui ressemble à ceci :

ul, li {
list-style-type: none;
margin:0;
padding:0;
}

ul {
position: absolute;
top: 129px;
left: 144px;
background: transparent url(im/menu1.gif) top left no-repeat;
width: 616px;
text-align: left;
}

li {float: left;}

li a {
display: block;
height: 18px;
width: 123px;
color: #fff;
font-size: 14px;
line-height: 18px;
font-weight: bold;
font-family: Arial, Serif;
text-decoration: none;
}

li a:hover {
background: transparent url(im/menu1.gif) top left no-repeat;
background-position: -616px 0%;
}

Il fonctionne très bien mais le problème est que j'aimerai avoir ce menu deux fois dans ma page, à des positions différentes.

Si je rajoute .menu1 et .menu2 devant chaque ul, li {, ul { etc et que je crée ma ul en faisant <ul class="menu1">, ça ne fonctionne pas.

Quelqu'un peut-il m'aider?

Merci d'avance!
Modifié par Mookie (06 Aug 2006 - 15:02)

Salut.

Tu veux faire 2 fois le même menu ? avec les mêmes styles, c'est bien ça ?

Dans ce cas, il suffit d'utiliser - correctement - une classe :

code HTML, valable pour les 2 menus :

<ul class="menu">
   <li><a href="#" title="...">lien 1</a></li>
   <li><a href="#" title="...">lien 2</a></li>
</ul>

dans la feuille de style :

ul.menu {
   list-style: none;
   margin: 0;
   padding:0;
   ...
}
ul.menu li {
   float: left;
}
ul.menu li a {
   display: block;
   ...
}