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... 
Merci d'avance.
Voici mon code:
HTML
Code :
- <div id="navcontainer">
- <ul id="nav">
- <li><a href="/index.php" title="Retour à l'accueil">Accueil</a></li>
- <li><a href="/modules/annuaire.php" title="Tous les spots de France">Annuaire</a></li>
- <li><a href="/modules/photos.php" title="Espace Photos">Photos</a>
- <ul>
- <li><a href="/galerie/freeride/freeride.php">Freeride</a></li>
- <li><a href="/galerie/descente/descente.php">Descentre</a></li>
- <li><a href="/galerie/dirt/dirt.php">Dirt</a></li>
- <li><a href="/galerie/street/street.php">Street</a></li>
- </ul>
- </li>
- <li><a href="#" title="Espace vidéos">Vidéos</a></li>
- <li><a href="/site/mountain.php" title="Tous savoir sur les stations">Mountain</a>
- <ul>
- <li><a href="/site/mountain.php">Les 2 alpes</a></li>
- <li><a href="#">Les Gets</a></li>
- <li><a href="#">Morzine</a></li>
- </ul>
- </li>
- <li><a href="/modules/comments.php" title="Tous ce que vous avez à dire">Commentaires</a></li>
- <li><a href="/modules/contact.php" title="Pour nous contacter">Contacts</a></li>
- <li><a href="#" title="">Forum</a></li>
- </ul>
- </div>
|
CSS
Code :
- #navcontainer ul {
- padding: .2em 0;
- margin: 0;
- list-style-type: none;
- background-color: #003D00;
- color: #FFF;
- width: 100%;
- font: normal 90% arial, helvetica, sans-serif;
- text-align: center;
- }
- /* listes de deuxième niveau */
- #nav li ul {
- position: absolute;
- background-color: none;
- color:#003D00;
- display: block;
- padding-left: 0;
- left: -999em;
- }
- /* listes imbriquées sous les items de listes survolés */
- #nav li:hover ul, #nav li.sfhover ul {
- left: auto;
- color:#FFFFFF;
- }
- #navcontainer li { display: inline; }
- #navcontainer li a {
- text-decoration: none;
- background-color: #003D00;
- color: #FFF;
- padding: .2em 1em;
- border-right: 1px solid #fff;
- }
- #navcontainer li a:hover {
- background-color: #007D00;
- color: #fff;
- }
|
JS
Code :
- sfHover = function() {
- var sfEls = document.getElementById("nav" ).getElementsByTagName("LI" );
- for (var i=0; i<sfEls.length; i++) {
- sfEls[i].onmouseover=function() {
- this.className+=" sfhover";
- }
- sfEls[i].onmouseout=function() {
- this.className=this.className.replace(new RegExp(" sfhover\\b" ), "" );
- }
- }
- }
|
