Menu déroulant / invisible ou non [Résolu]

[tanaka59]

Bonsoir

Voici un code HTML qui me sert de menu :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="bouton">
  <ul><a href="accueil.html">Accueil</a></ul>
   <ul><a>Aéroport</a>
     <ul><a href="http://www.airport-barcelona.com/">Barcelone</a></ul>
     <ul><a href="http://www.brusselsairport.be/fr/">Bruxelles</a></ul>
     <ul><a href="http://www.lyon.aeroport.fr/">Lyon</a></ul>
     <ul><a href="http://www.nice.aeroport.fr">Nice</a></ul>
     <ul><a href="http://www.aeroportsdeparis.fr">Paris</a></ul>
     <ul><a href="http://www.toulouse.aeroport.fr/">Toulouse</a></ul>
  </ul>
  <ul><a href="journeysway@skynet.be">Contact</a></ul>
  <ul><a href="http://www.europcar.fr">Europcar</a></ul>
  <ul><a href="http://www.eurometeo.com/english/home">Météo</a></ul>
  <ul><a href="image/ecrit_partie_1_htmlcss_georges_couteaux.pdf">PDF</ul>
  <ul><a href="ttp://www.rent.fr">Rent</a></ul>
  <ul><a href="http://www.sixt.fr">Sixt</a></ul>
  <ul><a >Tarification</a>
     <ul><a href="avion.html">Avion</a></ul>
     <ul><a href="bateau.html">Bateau</a></ul>
     <ul><a href="train.html">Train</a></ul>
  </ul>
  <ul><a href="http://wikimapia.org/#lat=50.7&lon=3.1333&z=10&l=2&m=b">Wikimapia</a></ul>
  </div>

Voici le code de mise en forme CSS :

Code :

1
2
3
.bouton a{ text-align:center ; background-image: url("image/bouton.gif") ; color : darkblue ; text-decoration : none ; display : block ; width :90px ; line-height : 25px ; float : left ; margin-left : 2px ; } 
.bouton a:visited { color: purple ; text-decoration:none ; } 
.bouton a:hover { color: white ; }

Avec le code CSS je désire rendre invisible ce qui est en rose, et qu'il apparaisse uniquement quand je survole ce qui est en vert .

Actuellement, quand je définis l'option block et display en CSS , ce qui est en rose ne s'affiche pas même en survolant ce qui est en vert.

Si une âme charitable peu éclairer ma lanterne

Merci d'avance

[Emyleen]

Déjà des ul dans des ul.... Bref des ul imbriqué c'est pas ça!
La structure des ul ressemble à ça part exemple :

Code html :

1
2
3
4
5
6
7
<div class="bouton">
<a>Aéroport</a>
<ul>
    <li></li>
    <li></li>
</ul>
</div>

Ensuite si tu fais :

Code css :

1
2
3
4
5
6
div.bouton ul {
    display: none;
}
a:hover > div.bouton ul {
    display: block;
}

ça devrait donner quelque chose non?

Mais pour un menu je te conseillerai d'utiliser le html5 avec la balise nav et des lien a en display: inline-block; ^^