28172 sujets

CSS et mise en forme, CSS3

[RESOLU] Menu déroulant CSS

bonjour à tous,

voila, je développe un menu vertical qui se déroule sur la droite mais je n'arrive pas a aligner correctement(la hauteur) des sous menus par rapport au menu principal.

Je pense que cela vient de mes positions relatives et absolues.

Dois-je mettre le #menu en position relative ou juste les li du menu principal (#menu li)? et ainsi mettre les sous menus(#menu ul li ul) en position absolue?

merci par avance pour votre aide

je vous colle le code de ma page html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>

<style type="text/css">
ul{

   margin:0;
   padding:0;
   list-style-type:none;

}


#menu_g {
		
		width:180px;
        list-style-type:none;
        height:40px;
        line-height:40px;
		position:relative;
        
}


#menu_g ul li ul {

        display:none;        
        background-color: blue;
        width:180px;
		position:absolute;
		
		
}


#menu_g ul li:hover ul {

        display:block;
		position:absolute;
		left:180px;
		

}

#menu li {

        list-style-type:none;
        height:40px;        
        line-height:40px;
		position:relative;}
		

#menu_g li a{

       text-decoration:none;
       color: black;
       padding-left:10px;
       display:block;
}

#menu_g a:hover{

      background-color:black;
      color:white;
      height:40px;
}

</style>

</head>

<body>


          <div id="menu_g">
          
            <ul>

              <li><a href="#">Santé</a>
              
              		<ul>

                         <li><a href="#">Complémentaire santé</a></li>
                         <li><a href="#">Surcomplémentaire santé</a></li>
                         
                     </ul>
              
              </li>
              <li><a href="#">Prévoyance</a>
              
              		<ul>

                         <li><a href="#">Indemnités journalières</a></li>
                         <li><a href="#">Invalidité</a></li>
                         <li><a href="#">Dépendance</a></li>
                         <li><a href="#">Décès, perte d'autonomie</a></li>
                         <li><a href="#">Plan et Pack prévoyance</a></li>
                        
                         
                     </ul>
              
              </li>
              <li><a href="#">RCPro</a>
              
              		<ul>
                         <li><a href="#">Responsabilite civile et Pro</a></li>
                                                
                    </ul>
              
              </li>
              <li><a href="#">Epargne</a>
              
              		 <ul>

                         <li><a href="#">Epargne salariale</a></li>
                         <li><a href="#">Assurance Vie</a></li>
                         
                     </ul>
              
              </li>
              <li><a href="#">Retraite</a>                            
                     <ul>

                         <li><a href="#">Retraite Madelin</a></li>
                         <li><a href="#">Retraite PERP</a></li>
                         
                     </ul>
                     
              </li>

           </ul>



          </div>

</body>
</html>
trouvé par moi même Smiley smile

c'était bien un souci de position et d'héritage entre les ul et li Smiley smile

et il faut renseigné sur la position de l'élément en absolue avec top, left, bottom ou right
Modifié par Latomate (30 Jul 2010 - 10:07)
Sujet clos
Aller à