Sujet Précédent Sujet Suivant

Menu déroulent vertical (CSS)

Fermé
Jordy91 - 15 juin 2012 à 13:31
 Jordy91 - 15 juin 2012 à 13:50
Bonjour,

je veu crée un menu déroulent, mais cela ne marche pas. j'ai mon Code HTML et CSS, mais les sous menus reste dessous les menus principales, et je ne comprend pas pourquoi.
serait t'il possible de corriger l'erreur s'il y en a une.

CODE HTML :


<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>2menu</title>
<link rel="stylesheet" type="text/css" href="2menu.css" />
</head>

<ul id="menu">

<li>

<a href="#1">Menu 1</a>

<ul>

<li><a href="#2">sous menu </a></li>

<li><a href="#3">encore un sous menu !</a></li>

<li><a href="#4">bah ! allez un autre !</a></li>

</ul>

</li>

<li>

<a href="#5">Menu 2</a>

<ul>

<li><a href="#6">sous menu </a></li>

<li><a href="#7">et un autre</a></li>

<li><a href="#8">encore un</a></li>

<li><a href="#9">un autre</a></li>

<li><a href="#10">le même</a></li>

</ul>

</li>

<li>

<a href="#21">Menu 3</a>

<ul>

<li><a href="#11">et bin v'la un autre sous menu</a></li>

<li><a href="#12">et un autre</a></li>

<li><a href="#13">puis un autre</a></li>

<li><a href="#14">taratata</a></li>

<li><a href="#15">fait beau hein !</a></li>

<li><a href="#16">oui mais froid</a></li>

<li><a href="#17">jamais content celui-là</a></li>

<li><a href="#18">c'est sur</a></li>

<li><a href="#19">en même temps</a></li>

<li><a href="#20">c'est vrai</a></li>

</ul>

</li>

<li>

<a href="#22">Menu 4</a>

<ul>

<li><a href="#23">sous catégorie</a></li>

<li><a href="#24">ça change de sous menu</a></li>

<li><a href="#25">mettez-y ce qu'il vous plait</a></li>

<li><a href="#26">allez encore un</a></li>

<li><a href="#27">puis un autre</a></li>

<li><a href="#28">et puis un autre</a></li>

<li><a href="#29">c'est rudement joli hein !</a></li>

<li><a href="#30">moi ça me plait bien</a></li>

<li><a href="#31">pourrait etre mieux </a></li>

<li><a href="#32">oui mais c'est plus cher !</a></li>

</ul>

</li>

</ul>

</html>



Code CSS :

body {
font: 11px verdana, sans-serif;
background:url("http://www.cireasy.com/images/fondmenuderoulant.png") no-repeat scroll center top #FFFFFF;;
margin: 0 ;
padding: 0;
}

#menu
{
width:600px; /*je mets une largeur correspondant à mon image de fond pour le placer à gauche dans l'image */
height: auto;
list-style-type: none;
margin: 0 auto; /*je mets un margin auto pour le centrer dans la page avec l'image*/
padding: 0;
border: 0;

}
#menu > li
{

width: 120px;
margin: 5px;
padding: 0;
border: 0;

}
#menu li a{
display: block;
color: #FFFFFF;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.5);
margin: 0;
padding: 4px 8px;
border:1px solid #FFFFFF;
text-decoration: none;
}

#menu li a:hover {
background-color: rgb(175, 214, 1);
background-color: rgba(175, 214, 1, 0.5);
}
/*---------------fin du menu de premier niveau-------------*/

/*---------------début du menu déroulant-------------------*/

#menu .menuderoulant {
width:160px; /*une largeur supérieur au menu li pour se rendre sur le menuderoulant meme avec un espace*/
display: none;
list-style-type: none;
margin: -23px 0 0 115px; /*une marge top inferieur pour remonter le menuderoulant et une marge left pour le decaler à droite du menu*/
padding: 0;
border: 0;
position:absolute; /*pour eviter tout decalage*/
}
#menu .menuderoulant li
{
float: right;
margin:0 auto;
padding: 0;
border: 0;
width: 150px;
border-top: 1px solid transparent;
border-right: 1px solid transparent;
}
#menu .menuderoulant li a
{
display: block;
color: #FFF;
margin: 0;
border: 0;
text-decoration: none;
background-color:rgb(0, 0, 0);
background-color:rgba(0,0,0,0.5);

}
#menu .menuderoulant li a:hover
{
background-color: rgb(18, 89, 239);
background-color: rgba(18, 89, 239, 0.8);

}

#menu .menuderoulant li a:visited {
background-color:rgb(227, 22, 30);
background-color:rgba(227, 22, 30, 0.5);
}

#menu li:hover > .menuderoulant {
display: block;
}

merci de me répondre.
Cordialement,
 Jordy91



            
                

    
    

    
            

            

    

    
    

        A voir également:         
    




    

        
        

                
1 réponse

        

        
    


            

        
        
        

                        Réponse 1 / 1
        


                

                

        

                    

        


     
             

            

    

            


    
    


        
        

                

        


     
             

                    lili34500
    
        
    
                    Messages postés
            
                


     
             

            178
        
            
                            Date d'inscription
            lundi 11 février 2008
                            Statut
            Membre
                            Dernière intervention
            17 août 2012
            

            


     
             

                    16
    
        

                    

                    15 juin 2012 à 13:35
                        

    


    

                        

                    Utilise la fonction hide() de jQuery puis la fonction slideDown() :)
                
                

    
        

    
            
        1
                                
                
    

            



    

        
        
    


        

        

                    

    

        

                    

                    


            
    
    

        



    

                    

    
        

    

            


    
    


    
    

                

    Jordy91


    

    15 juin 2012 à 13:38

    






    ok merci, mais je mais quoi exactement dedans ? et je la place ou?
    




    
 
    
    
    0

            
    


    

            



    

        
        
    



    

    
            

        

                    


                
        
    
    

        



    

                    

    
        

    

            


    
    


    
    

                

    Jordy91


    

    15 juin 2012 à 13:50

    






    j'ai oublier de dire que je n'utilise pas de JavaScript ;)
    




    
 
    
    
    0

            
    


    

            



    

        
        
    



    

    
            

        

            

        

    



    
Discussions similaires

                                                    

                
                    Barre verticale droite sur clavier
                    

                        

    

                
            


    
    


                        

                                                                                    k_lou -  

                            
                                                                                    Leuide - 
                        

                    

                    

                    

                        41 réponses
                    

                
            

                                                        

                
                    le signe " | " dans excel
                    

                        

    

            


    
    


                        

                                                                                    zed -  

                            
                                                                                                                                                Utilisateur anonyme - 
                        

                    

                    

                    

                        4 réponses
                    

                
            

                                                        

                
                    Touche du clavier barre verticale
                    

                        

    

                
            


    
    


                        

                                                                                    k_lou -  

                            
                                                                                    Architecte_300 - 
                        

                    

                    

                    

                        6 réponses
                    

                
            

                                                        

                
                    svp  faire une barre verticale avec clavier
                    

                        

    

            


    
    


                        

                                                                                    momomomo13 -  

                            
                                                                                    minitoul_290 - 
                        

                    

                    

                    

                        24 réponses
                    

                
            

                                                        

                
                    menu caché
                    

                        

    

            


    
    


                        

                                                                                    laurent -  

                            
                                                                                    ChariduP - 
                        

                    

                    

                    

                        7 réponses