La page du menu :
<html>
<head>
<link href="menu/style2.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
function hover(obj){
if(document.all){
UL = obj.getElementsByTagName('ul');
if(UL.length > 0){
sousMenu = UL[0].style;
if(sousMenu.display == 'none' || sousMenu.display == ''){
sousMenu.display = 'block';
}else{
sousMenu.display = 'none';
}
}
}
}
function setHover(){
LI = document.getElementById('menu').getElementsByTagName('li');
nLI = LI.length;
for(i=0; i < nLI; i++){
LI[i].onmouseover = function(){
hover(this);
}
LI[i].onmouseout = function(){
hover(this);
}
}
}
</script>
</head>
<body onload="setHover()">
<ul id="menu">
<li>
<a href="" class="puce"> Par genres...</a>
<ul>
<li><a href="genre.php?g=1" class="puce"> Action & Aventure</a>
<ul>
<li><a href="subgenre.php?g=1&s=14"> Action Indie</a></li>
<li><a href="subgenre.php?g=1&s=9"> Action militaire</a></li>
<li><a href="subgenre.php?g=1&s=5"> Action Science-Fiction</a></li>
<li><a href="subgenre.php?g=1&s=13"> Arts martiaux</a></li>
<li><a href="subgenre.php?g=1&s=192"> Aventure</a></li>
<li><a href="subgenre.php?g=1&s=4"> Blockbuster</a></li>
<li><a href="subgenre.php?g=1&s=1"> Classiques d'action</a></li>
<li><a href="subgenre.php?g=1&s=2"> Comédies d'action</a></li>
<li><a href="subgenre.php?g=1&s=7"> Désastres</a></li>
<li><a href="subgenre.php?g=1&s=6"> Dessins comiques</a></li>
<li><a href="subgenre.php?g=1&s=12"> Espions</a></li>
<li><a href="subgenre.php?g=1&s=11"> Films de guerre</a></li>
<li><a href="subgenre.php?g=1&s=15"> Flics & escrocs</a></li>
<li><a href="subgenre.php?g=1&s=8"> James Bond</a></li>
<li><a href="subgenre.php?g=1&s=3"> Récits à suspense</a></li>
<li><a href="subgenre.php?g=1&s=10"> Western</a></li>
</ul>
</li>
<li><a href="genre.php?g=2" class="puce"> Comédie</a>
<ul>
<li><a href="subgenre.php?g=2&s=24"> Blagues</a></li>
<li><a href="subgenre.php?g=2&s=22"> Comédie sur scène</a></li>
<li><a href="subgenre.php?g=2&s=30"> Comédies classiques</a></li>
<li><a href="subgenre.php?g=2&s=18"> Comédies cultes</a></li>
<li><a href="subgenre.php?g=2&s=16"> Comédies d'action</a></li>
<li><a href="subgenre.php?g=2&s=21"> Comédies de jeunes</a></li>
<li><a href="subgenre.php?g=2&s=19"> Comédies étrangères</a></li>
<li><a href="subgenre.php?g=2&s=29"> Comédies familiales</a></li>
<li><a href="subgenre.php?g=2&s=28"> Comédies Indie</a></li>
<li><a href="subgenre.php?g=2&s=31"> Comédies noires</a></li>
<li><a href="subgenre.php?g=2&s=20"> Comédies politiques</a></li>
<li><a href="subgenre.php?g=2&s=27"> Comédies romantiques</a></li>
<li><a href="subgenre.php?g=2&s=23"> Comédies sportives</a></li>
<li><a href="subgenre.php?g=2&s=25"> Films de fous</a></li>
<li><a href="subgenre.php?g=2&s=17"> Humour anglais</a></li>
<li><a href="subgenre.php?g=2&s=26"> Saturday Night Live</a></li>
</ul>
</li>
<li><a href="genre.php?g=3" class="puce"> Musique & Concerts</a>
<ul>
<li><a href="subgenre.php?g=3&s=42"> Blues</a></li>
<li><a href="subgenre.php?g=3&s=35"> Country</a></li>
<li><a href="subgenre.php?g=3&s=36"> Gospel</a></li>
<li><a href="subgenre.php?g=3&s=39"> Heavy Metal</a></li>
<li><a href="subgenre.php?g=3&s=44"> Jazz</a></li>
<li><a href="subgenre.php?g=3&s=45"> Karaoké</a></li>
<li><a href="subgenre.php?g=3&s=46"> Musicals</a></li>
<li><a href="subgenre.php?g=3&s=34"> Musique classique</a></li>
<li><a href="subgenre.php?g=3&s=43"> Musique de fêtes</a></li>
<li><a href="subgenre.php?g=3&s=47"> New Age</a></li>
<li><a href="subgenre.php?g=3&s=48"> Opéra</a></li>
<li><a href="subgenre.php?g=3&s=49"> Pop</a></li>
<li><a href="subgenre.php?g=3&s=32"> R&B / Funk</a></li>
<li><a href="subgenre.php?g=3&s=33"> Rap & Hip-Hop</a></li>
<li><a href="subgenre.php?g=3&s=41"> Reggae / World music</a></li>
<li><a href="subgenre.php?g=3&s=40"> Rock Classique</a></li>
<li><a href="subgenre.php?g=3&s=38"> Rock moderne</a></li>
<li><a href="subgenre.php?g=3&s=37"> Standard</a></li>
</ul>
</li>
<li><a href="genre.php?g=4" class="puce"> Intérêts spéciaux</a>
<ul>
<li><a href="subgenre.php?g=4&s=164"> Anime & manga</a></li>
<li><a href="subgenre.php?g=4&s=62"> Art</a></li>
<li><a href="subgenre.php?g=4&s=61"> Autres documentaires</a></li>
<li><a href="subgenre.php?g=4&s=50"> Dessins animés</a></li>
<li height=""><a href="subgenre.php?g=4&s=64"> Doc. historiques</a></li>
<li><a href="subgenre.php?g=4&s=65"> Doc. biographiques</a></li>
<li><a href="subgenre.php?g=4&s=60"> Doc. criminels</a></li>
<li><a href="subgenre.php?g=4&s=51"> Educatif</a></li>
<li><a href="subgenre.php?g=4&s=59"> IMAX</a></li>
<li><a href="subgenre.php?g=4&s=195"> Introuvables</a></li>
<li><a href="subgenre.php?g=4&s=58"> Nature</a></li>
<li><a href="subgenre.php?g=4&s=56"> PC Friendly</a></li>
<li><a href="subgenre.php?g=4&s=63"> Santé/Fitness</a></li>
<li><a href="subgenre.php?g=4&s=57"> Science</a></li>
<li><a href="subgenre.php?g=4&s=55"> Spirituel</a></li>
<li><a href="subgenre.php?g=4&s=54"> Sports</a></li>
<li><a href="subgenre.php?g=4&s=53"> Voyage</a></li>
</ul>
</li>
<li><a href="genre.php?g=5" class="puce"> Enfants et famille</a>
<ul>
<li><a href="subgenre.php?g=5&s=68"> A partir de 13 ans révolus</a></li>
<li><a href="subgenre.php?g=5&s=69"> A partir de 6 ans révolus</a></li>
<li><a href="subgenre.php?g=5&s=74"> Adolescents</a></li>
<li><a href="subgenre.php?g=5&s=70"> Audience générale</a></li>
<li><a href="subgenre.php?g=5&s=76"> Classiques familiaux</a></li>
<li><a href="subgenre.php?g=5&s=66"> Contes d'animaux</a></li>
<li><a href="subgenre.php?g=5&s=80"> Dessins animés</a></li>
<li><a href="subgenre.php?g=5&s=78"> Disney</a></li>
<li><a href="subgenre.php?g=5&s=67"> Educatif</a></li>
<li><a href="subgenre.php?g=5&s=73"> Enfants</a></li>
<li><a href="subgenre.php?g=5&s=72"> Fêtes</a></li>
<li><a href="subgenre.php?g=5&s=75"> Films de famille</a></li>
<li><a href="subgenre.php?g=5&s=79"> Personnages de livres</a></li>
<li><a href="subgenre.php?g=5&s=71"> Pokemon</a></li>
<li><a href="subgenre.php?g=5&s=77"> Sésame Street / Muppets</a></li>
</ul>
</li>
<li><a href="genre.php?g=6" class="puce"> Drame</a>
<ul>
<li><a href="subgenre.php?g=6&s=85"> A faire pleurer</a></li>
<li><a href="subgenre.php?g=6&s=81"> Biographies</a></li>
<li><a href="subgenre.php?g=6&s=83"> Désastres</a></li>
<li><a href="subgenre.php?g=6&s=92"> Drames au tribunal</a></li>
<li><a href="subgenre.php?g=6&s=91"> Drames cultes</a></li>
<li><a href="subgenre.php?g=6&s=93"> Drames classiques</a></li>
<li><a href="subgenre.php?g=6&s=82"> Drames criminels</a></li>
<li><a href="subgenre.php?g=6&s=86"> Drames du show-biz</a></li>
<li><a href="subgenre.php?g=6&s=84"> Drames Indie</a></li>
<li><a href="subgenre.php?g=6&s=89"> Drames militaires</a></li>
<li><a href="subgenre.php?g=6&s=88"> Drames politiques</a></li>
<li><a href="subgenre.php?g=6&s=87"> Drames romantiques</a></li>
<li><a href="subgenre.php?g=6&s=90"> Films noirs</a></li>
<li><a href="subgenre.php?g=6&s=193"> Films gay</a></li>
</ul>
</li>
<li><a href="genre.php?g=7" class="puce"> Horreur</a>
<ul>
<li><a href="subgenre.php?g=7&s=97"> Balafreur</a></li>
<li><a href="subgenre.php?g=7&s=96"> Classique d'horreur</a></li>
<li><a href="subgenre.php?g=7&s=105"> Créatures</a></li>
<li><a href="subgenre.php?g=7&s=101"> Effroi pour adolescents</a></li>
<li><a href="subgenre.php?g=7&s=94"> Film-B</a></li>
<li><a href="subgenre.php?g=7&s=95"> Frankenstein</a></li>
<li><a href="subgenre.php?g=7&s=104"> Halloween</a></li>
<li><a href="subgenre.php?g=7&s=103"> Histoires sataniques</a></li>
<li><a href="subgenre.php?g=7&s=99"> Loup-garou</a></li>
<li><a href="subgenre.php?g=7&s=196"> Serial killer</a></li>
<li><a href="subgenre.php?g=7&s=196"> Surnaturel</a></li>
<li><a href="subgenre.php?g=7&s=102"> Vampires</a></li>
<li><a href="subgenre.php?g=7&s=100"> Zombie</a></li>
</ul>
</li>
<li><a href="genre.php?g=8" class="puce"> Romantique</a>
<ul>
<li><a href="subgenre.php?g=8&s=113"> Comédie romantique</a></li>
<li><a href="subgenre.php?g=8&s=108"> Conte de fées</a></li>
<li><a href="subgenre.php?g=8&s=112"> Romance chaude</a></li>
<li><a href="subgenre.php?g=8&s=109"> Romance classique</a></li>
<li><a href="subgenre.php?g=8&s=111"> Romance d'adolescents</a></li>
<li><a href="subgenre.php?g=8&s=110"> Romance dramatique</a></li>
<li><a href="subgenre.php?g=8&s=107"> Romance étrangères</a></li>
<li><a href="subgenre.php?g=8&s=106"> Séparations</a></li>
</ul>
</li>
<li><a href="genre.php?g=9" class="puce"> Suspense</a>
<ul>
<li><a href="subgenre.php?g=9&s=117"> Action à suspense</a></li>
<li><a href="subgenre.php?g=9&s=116"> Classique à suspense</a></li>
<li><a href="subgenre.php?g=9&s=115"> Crime à suspense</a></li>
<li><a href="subgenre.php?g=9&s=123"> Espions</a></li>
<li><a href="subgenre.php?g=9&s=119"> Meurtre</a></li>
<li><a href="subgenre.php?g=9&s=120"> Mystère</a></li>
<li><a href="subgenre.php?g=9&s=121"> Psychologie</a></li>
<li><a href="subgenre.php?g=9&s=122"> Sci-Fi à suspense</a></li>
<li><a href="subgenre.php?g=9&s=124"> Surnaturel à suspense</a></li>
<li><a href="subgenre.php?g=9&s=125"> Suspense</a></li>
<li><a href="subgenre.php?g=9&s=114"> Suspense érotique</a></li>
<li><a href="subgenre.php?g=9&s=118"> Truands</a></li>
</ul>
</li>
<li><a href="genre.php?g=10" class="puce"> Classiques</a>
<ul>
<li><a href="subgenre.php?g=10&s=126"> Classique d'action</a></li>
<li><a href="subgenre.php?g=10&s=128"> Classique de guerre</a></li>
<li><a href="subgenre.php?g=10&s=134"> Classiques d'horreur</a></li>
<li><a href="subgenre.php?g=10&s=135"> Classique étrangers</a></li>
<li><a href="subgenre.php?g=10&s=136"> Classique familiaux</a></li>
<li><a href="subgenre.php?g=10&s=140"> Comédies classiques</a></li>
<li><a href="subgenre.php?g=10&s=139"> Drames classiques</a></li>
<li><a href="subgenre.php?g=10&s=129"> Epique/Historiques</a></li>
<li><a href="subgenre.php?g=10&s=130"> Film sans paroles</a></li>
<li><a href="subgenre.php?g=10&s=133"> Indie classiques</a></li>
<li><a href="subgenre.php?g=10&s=132"> Musicals</a></li>
<li><a href="subgenre.php?g=10&s=138"> Récie à suspense</a></li>
<li><a href="subgenre.php?g=10&s=131"> Romanesque classique</a></li>
<li><a href="subgenre.php?g=10&s=127"> Science-Fiction classique</a></li>
<li><a href="subgenre.php?g=10&s=137"> Western classique</a></li>
</ul>
</li>
<li><a href="genre.php?g=11" class="puce"> Etranger</a>
<ul>
<li><a href="subgenre.php?g=11&s=159"> Allemand</a></li>
<li><a href="subgenre.php?g=11&s=162"> Australien</a></li>
<li><a href="subgenre.php?g=11&s=144"> Canadien</a></li>
<li><a href="subgenre.php?g=11&s=161"> Chinois</a></li>
<li><a href="subgenre.php?g=11&s=141"> Classiques étrangers</a></li>
<li><a href="subgenre.php?g=11&s=142"> Comédies étrangèes</a></li>
<li><a href="subgenre.php?g=11&s=145"> Danois</a></li>
<li><a href="subgenre.php?g=11&s=150"> Espagnol</a></li>
<li><a href="subgenre.php?g=11&s=146"> Français</a></li>
<li><a href="subgenre.php?g=11&s=160"> Hollandais</a></li>
<li><a href="subgenre.php?g=11&s=147"> Hong Kong</a></li>
<li><a href="subgenre.php?g=11&s=158"> Hongrois</a></li>
<li><a href="subgenre.php?g=11&s=157"> Indien</a></li>
<li><a href="subgenre.php?g=11&s=156"> Irlandais</a></li>
<li><a href="subgenre.php?g=11&s=155"> Italien</a></li>
<li><a href="subgenre.php?g=11&s=154"> Jamaïquain</a></li>
<li><a href="subgenre.php?g=11&s=153"> Japonais</a></li>
<li><a href="subgenre.php?g=11&s=143"> Roman étranger</a></li>
<li><a href="subgenre.php?g=11&s=148"> Royaume-Uni</a></li>
<li><a href="subgenre.php?g=11&s=151"> Russe</a></li>
<li><a href="subgenre.php?g=11&s=152"> Suisse</a></li>
<li><a href="subgenre.php?g=11&s=149"> Taiwan</a></li>
</ul>
</li>
<li><a href="genre.php?g=12" class="puce"> Science-Fiction</a>
<ul>
<li><a href="subgenre.php?g=12&s=171"> Cyborgs et robots</a></li>
<li><a href="subgenre.php?g=12&s=166"> Fantaisie/Imagination</a></li>
<li><a href="subgenre.php?g=12&s=170"> Sci-Fi à suspense</a></li>
<li><a href="subgenre.php?g=12&s=172"> Science-Fiction alien</a></li>
<li><a href="subgenre.php?g=12&s=165"> Science-Fiction classique</a></li>
<li><a href="subgenre.php?g=12&s=163"> Science-Fiction d'action</a></li>
<li><a href="subgenre.php?g=12&s=169"> Star Trek</a></li>
<li><a href="subgenre.php?g=12&s=167"> Voyage dans l'espace</a></li>
<li><a href="subgenre.php?g=12&s=168"> Voyage dans le temps</a></li>
</ul>
</li>
<li><a href="moviepacklist.php"> Séries TV</a>
</li>
</ul>
</li>
<li>
<a href="" class="puce"> Par catégories...</a>
<ul>
<li><a href="newreleases.php"> Nouveaux DVDs</a></li>
<li><a href="newarrivals.php"> Nouveaux ajouts</a></li>
<li><a href="boxoffice.php"> Nouveautés du Box Office</a></li>
<li><a href="favouritemovie.php"> Les coups de coeur</a></li>
<li><a href="awardwinner.php"> Lauréat du prix</a></li>
<li><a href="actor.php"> Acteur</a></li>
<li><a href="director.php"> Réalisateur</a></li>
<li><a href="all.php"> Tous les films</a></li>
<li><a href="language.php?movieLanguage=f"> Films en français</a></li>
<li><a href="language.php?movieLanguage=d"> Films en allemand</a></li>
<li><a href="language.php?movieLanguage=e"> Films en en anglais</a></li>
<li><a href="language.php?movieLanguage=Italiano"> Films en italien</a></li>
<li><a href="language.php?movieLanguage=Español"> Films en espagnol</a></li>
<li><a href="price.php"> Prix</a></li>
</ul>
</li>
<li>
<a href="" class="puce"> Par notes...</a>
<ul>
<li><a href="userrating.php?f_value=1&l_value=2"> * à **</a></li>
<li><a href="userrating.php?f_value=2&l_value=3"> ** à ***</a></li>
<li><a href="userrating.php?f_value=3&l_value=4"> *** à ****</a></li>
<li><a href="userrating.php?f_value=4&l_value=5"> **** à *****</a></li>
</ul>
</li>
<li>
<a href="" class="puce"> Par nos experts...</a>
<ul>
<li><a href="mustsee.php"> DVD à voir</a></li>
<li><a href="clapreview.php"> Critiques de Clap.ch</a></li>
<li><a href="news_f.php"> Dernière newsletter</a></li>
<li><a href="top50rentals.php"> Top 50</a></li>
<li><a href="moviepack.php?seriesType=movie"> La nuit blanche</a></li>
</ul>
</li>
</ul>
<body>
</html>
Le fichier CSS :
ul#menu li ul{
display:none;
}
ul#menu li:hover>ul{
display:block;
}
ul#menu{
float:left;
}
ul#menu,
ul#menu ul{
border:1px solid #00457A;
list-style:none;
margin:0px;
padding:0px;
width:148px;
_width:150px;
background-image:url("menu/puce.gif");
line-height:20px;
}
ul#menu ul{
position:absolute;
top:-100px;
left:148px;
}
ul#menu li{
position:relative;
margin:0px;
padding:0px;
_display:inline;
}
ul#menu a{
display:block;
font-family:arial;
font-size:12px;
color:#FFFFFF;
height:20px;
text-decoration:none;
text-align:left;
}
ul#menu a:hover{
background:#FF6E00;
display:block;
font-family:arial;
font-size:12px;
color:#FFFFFF;
height:20px;
text-decoration:none;
text-align:left;
}
a.puce{
background:url("menu/puce2.gif");
background-repeat: repeat;
}
C'est un peu long, pour ça que je ne l'ai pas mis et que j'ai mis le tuto sur lequel je me suis basé
[/i][/i]
