Menu CSS sans javascript

Menu CSS sans javascript - HTML/CSS - Programmation

Marsh Posté le 05-08-2010 à 17:27:36    

Hello
 
je souhaiterais faire un menu du même genre que celui de ce site
http://mafft.cbrc.jp/alignment/server/
avec en plus un sous-menu qui apparait lorsque la souris passe au-dessus des sous-catégories.
Le tout, sans javascript.
 
 
Voici ce que j'ai pour l'instant.
Tout s'affiche comme prévu, sauf que le sous-menu n'apparait pas lorsque la souris passe sur "Translate ..."
 

Code :
  1. <div id='left_menu'>
  2.     <div id="menu">
  3.         <div class='category'>Query</div>
  4.             <div class='sub_category'><a href="#">Search ...</a></div>
  5.             <div class='sub_category'><a href="/cgi-bin/truc">Motif Scan</a></div>
  6.             <div class='sub_category'><a href="#">Translate ...</a>
  7.                 <ul><!-- sous-sous-categories -->
  8.                      <li><a href="/cgi-bin/bidule">Translator</a></li>
  9.                      <li><a href="/cgi-bin/machin">Translatoror</a></li>
  10.                 </ul>
  11.             </div>
  12.             <div class='sub_category'><a href="#">Tools ...</a></div><br>
  13.         <div class='category'>Hub</div>
  14.     </div>
  15. </div>


Code :
  1. #menu{
  2. width: 100%;
  3. position: relative;
  4. text-align: left;
  5. z-index: 100;
  6. }
  7. .category{
  8. font-size: 20px;
  9. font-weight: bold;
  10. padding: 0 5px 0 33px;
  11. color: #66cdaa;
  12. }
  13. .sub_category{
  14. font-size: 18px;
  15. font-weight: normal;
  16. padding-left: 68px;
  17. color: #66cdaa;
  18. list-style-type: none;
  19. z-index: 100;
  20. }
  21. .sub_category a{
  22. text-decoration: none;
  23. color: #66cdaa;
  24. }
  25. .sub_category a:hover {
  26. color: #FFF;
  27. }
  28. .sub_category ul {
  29. display: none;
  30. position: absolute;
  31. }
  32. .sub_category a:hover ul{
  33. display: block;
  34. height: auto;
  35. z-index: 1000;
  36. }


Une idée ?
 
Merci

Reply

Marsh Posté le 05-08-2010 à 17:27:36   

Reply

Marsh Posté le 06-08-2010 à 18:06:51    

Salut,
 
Si j'ai bien compris, voilà ce que tu cherches:http://www.commentcamarche.net/for [...] ti-niveaux

Reply

Marsh Posté le 12-08-2010 à 16:28:59    

Merci
 
Je me suis inspiré de ce lien et ça fonctionne.
Je mets tout en place et ne restera plus qu'à tester tout ça sous les différents navigateurs.
 
encore merci

Reply

Marsh Posté le 12-08-2010 à 16:39:23    

Meme si t'as trouvé la solution, ton problème était que le <ul> que tu visais (pour le display:block) n'existe pas en tant que tel...
Ce dernier est le frère du <a> et non un descendant...


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Marsh Posté le 12-08-2010 à 16:40:59    

C'est bien ce que j'avais vu.
 
J'ai mis mes liens dans un autre ul li et je peux les atteindre avec
.sub_category ul a:hover ul

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed