CSS Menu déroulant inline avec sous menu vertical

CSS Menu déroulant inline avec sous menu vertical - HTML/CSS - Programmation

Marsh Posté le 01-09-2005 à 20:30:22    

Salut
 
J'ai tenté plusieurs trucs pour que le ss menu s affiche exactement sous l'item survollé et de facon vertical
Mais rien...
De plus j'ai osé regarder ce que donner le code sous IE quel horreur... :sweat:  
Merci d'avance.
 
Voici mon code:
HTML

Code :
  1. <div id="navcontainer">
  2. <ul id="nav">
  3.  <li><a href="/index.php" title="Retour à l'accueil">Accueil</a></li>
  4.  <li><a href="/modules/annuaire.php" title="Tous les spots de France">Annuaire</a></li>
  5.  <li><a href="/modules/photos.php" title="Espace Photos">Photos</a>
  6.   <ul>
  7.    <li><a href="/galerie/freeride/freeride.php">Freeride</a></li>
  8.    <li><a href="/galerie/descente/descente.php">Descentre</a></li>
  9.    <li><a href="/galerie/dirt/dirt.php">Dirt</a></li>
  10.    <li><a href="/galerie/street/street.php">Street</a></li>
  11.   </ul>
  12.  </li>
  13.  <li><a href="#" title="Espace vid&eacute;os">Vid&eacute;os</a></li>
  14.  <li><a href="/site/mountain.php" title="Tous savoir sur les stations">Mountain</a>
  15.   <ul>
  16.    <li><a href="/site/mountain.php">Les 2 alpes</a></li>
  17.    <li><a href="#">Les Gets</a></li>
  18.    <li><a href="#">Morzine</a></li>
  19.   </ul>
  20.  </li>
  21.  <li><a href="/modules/comments.php" title="Tous ce que vous avez à dire">Commentaires</a></li>
  22.  <li><a href="/modules/contact.php" title="Pour nous contacter">Contacts</a></li>
  23.  <li><a href="#" title="">Forum</a></li>
  24. </ul>
  25. </div>


 
CSS

Code :
  1. #navcontainer ul {
  2. padding: .2em 0;
  3. margin: 0;
  4. list-style-type: none;
  5. background-color: #003D00;
  6. color: #FFF;
  7. width: 100%;
  8. font: normal 90% arial, helvetica, sans-serif;
  9. text-align: center;
  10. }
  12. /* listes de deuxième niveau */
  13. #nav li ul {
  14. position: absolute;
  15. background-color: none;
  16. color:#003D00;
  17. display: block;
  18. padding-left: 0;
  19. left: -999em;
  20. }
  21. /* listes imbriquées sous les items de listes survolés */
  22. #nav li:hover ul, #nav li.sfhover ul {
  23. left: auto;
  24. color:#FFFFFF;
  25. }
  27. #navcontainer li { display: inline; }
  29. #navcontainer li a {
  30. text-decoration: none;
  31. background-color: #003D00;
  32. color: #FFF;
  33. padding: .2em 1em;
  34. border-right: 1px solid #fff;
  35. }
  37. #navcontainer li a:hover {
  38. background-color: #007D00;
  39. color: #fff;
  40. }


 
JS

Code :
  1. sfHover = function() {
  2. var sfEls = document.getElementById("nav" ).getElementsByTagName("LI" );
  3. for (var i=0; i<sfEls.length; i++) {
  4.  sfEls[i].onmouseover=function() {
  5.   this.className+=" sfhover";
  6.  }
  7.  sfEls[i].onmouseout=function() {
  8.   this.className=this.className.replace(new RegExp(" sfhover\\b" ), "" );
  9.  }
  10. }
  11. }

Reply

Marsh Posté le 01-09-2005 à 20:30:22   

Reply

Marsh Posté le 02-09-2005 à 00:52:03    

Nobody?

Reply

Sujets relatifs:

Leave a Replay

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