Menu deroulant horizontal

[sophieplaya]

Bonjour !!

Je suis en train de tester un nouveua menu pour mon site, deroulant au lieu de statique, et je l'ai mis sur une page de test :
http://www.kaaxan.com/index.php?page=conseils
en doublons de l'actuel.

mon probleme: vous pourvez le voir, il ne passe pas "au-dessus" ce ce qui est deja sur la page...

voici mon code:

   <script type="text/javascript">
    <!--
    window.onload=montre;
    function montre(id) {
    var d = document.getElementById(id);
       for (var i = 1; i<=10; i++) {
          if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
       }
    if (d) {d.style.display='block';}
    }
    //-->
    </script>


    <style type="text/css">
    <!--
    /* CSS issu des tutoriels http://css.alsacreations.com */
    body {
    margin: 0;
    padding: 0;
    background: white;
    font: 80% verdana, arial, sans-serif;
    }
    dl, dt, dd, ul, li {
    margin: 0;
    padding: 0;
    list-style-type: none;
    }
    #menu {
    z-index:100;
    width: 100%;
    }
    #menu dl {
    float: left;
    width: 9em;
    margin: 0 1px;
    }
    #menu dt {
    cursor: pointer;
    text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color:  #FFFFFF;
    background: #37A8C5;
    border: 1px solid gray;
    }
    #menu dd {
    border: 1px solid gray;
    }
    #menu li {
    text-align: center;
    background: #fff;
    }
    #menu li a, #menu dt a {
    color: #000;
    text-decoration: none;
    display: block;
    height: 100%;
    border: 0 none;
    }
    #menu li a:hover, #menu dt a:hover {
    background: #eee;
    }

    #site {
    position: absolute;
    z-index: 1;
    top : 70px;
    left : 10px;
    color: #000;
    background-color: #ddd;
    padding: 5px;
    border: 1px solid gray;
    }

    a {text-decoration: none;
    color: black;
    color: #222;
    }
    -->
    </style>


    <div id="menu">
       <dl>
          <dt onmouseover="javascript:montre();"><a href="http://www.kaaxan.com" title="Home"><? print ll("Inicio","Home","Accueil","Home"); ?> </a></dt>
       </dl>
       
       <dl>         
          <dt onmouseover="javascript:montre('smenu1');">Propriétes</dt>
             <dd id="smenu1">
                <ul>
                   <li><a href="http://www.kaaxan.com/index.php?page=proprietes">Liste</a></li>
				   <li><a href="http://www.kaaxan.com/index.php?page=cartetoutes">Carte des maisons</a></li>                 
                </ul>

             </dd>
       </dl>
       
       
       <dl>   
          <dt onmouseover="javascript:montre('smenu2');">FAQ</dt>
             <dd id="smenu2">
                <ul>
                   <li><a href="http://www.kaaxan.com/index.php?page=faq">Etapes de la location</a></li>
				   <li><a href="http://www.kaaxan.com/index.php?page=cartetoutes">Carte des maisons</a></li>
				   <li><a href="http://www.kaaxan.com/index.php?page=panier">Vos courses</a></li>
                   <li><a href="http:/www,kaaxa.com/index.php?page=video">Video</a></li>
				   			   
	            </ul>
             </dd>
       </dl>
       
       <dl>   
          <dt onmouseover="javascript:montre('smenu3');">Services Inclus</dt>
             <dd id="smenu3">

                <ul>
                   <li><a href="http://www.kaaxan.com/index.php?page=faq">Etapes de la location</a></li>
				    <li><a href="http://www.kaaxan.com/index.php?page=faq">Etapes de la location</a></li>


                </ul>
             </dd>
       </dl>
       
       <dl>   
          <dt onmouseover="javascript:montre('smenu4');">Riviera Maya</dt>
             <dd id="smenu4">
                <ul>
				
                    <li><a href="http://www.kaaxan.com/index.php?page=faq">Riviera Maya</a></li>    
				    <li><a href="http://www.kaaxan.com/index.php?page=faq">Playa del Carmen</a></li>
					<li><a href="http://www.kaaxan.com/index.php?page=faq">Conseils de Voyage</a></li>		
						
                </ul>
             </dd>
       </dl>
       
       <dl>   
          <dt onmouseover="javascript:montre('smenu5');">L'Equipe</dt>
		    <dd id="smenu5">
			  <ul>
			  <li><a href="http://www.kaaxan.com/index.php?page=nosotros">L'équipe</a></li>
			  </ul></dd>
       </dl>
       
       <dl>   
          <dt onmouseover="javascript:montre('smenu6');">Contact</dt>
		    <dd id="smenu6">
			  <ul>
			  <li><a href="http://www.kaaxan.com/index.php?page=contact">Contact</a></li>
			  </ul></dd>
       </dl>
	          
       
    </div>

Merci !!

 

[sophieplaya]

Bon j'ai trouvé... il fallait mettre un positio: absolute au niveau du #menu...

mais maintenant j'ai un menu qui se déroule mais qui ne se renroule pas, c'est quoi al formule pour qu'apres l'ouverture OnMouseOver il se retracte ?
COmment se fait-il que je n'arrive pas a le positionner au centre de ma td?
merci

 

[u94082]

Salut,

Il vaut mieux oublier le javascript pour ce genre de menu, c'est pas bon pour le visiteur (si JS désactivé) ni pour le référencement.
Tu trouvera beaucoup d'exemples full css ici : http://css.maxdesign.com.au/listamatic/

 

[lg]

<dt onmouseover="javascript:montre('smenu1');">Accueil</dt>
			<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">

 

[Rod la Kox]

Ici, il y a tout ce qu'il faut : http://www.cssplay.co.uk/menus/

 

[sophieplaya]

Genial merci...

un dernier truc... quand j'ouvre ma page,tous les menus se déroulent ??

 

[lg]

oui mais ils se referment aussi sec non ?? temps de lecture .....

 

[sophieplaya]

Bah non justement...
Ils ne se referment que lorsque je passe la souris dessus... c'est pas tres classe...

 

[sophieplaya]

J'ai trouvé...

window.onload=montre;