Sujet Précédent Sujet Suivant

Menu déroulant

Résolu/Fermé
a6dik Messages postés 2 Date d'inscription mercredi 4 décembre 2013 Statut Membre Dernière intervention 4 décembre 2013 - 4 déc. 2013 à 17:02
a6dik Messages postés 2 Date d'inscription mercredi 4 décembre 2013 Statut Membre Dernière intervention 4 décembre 2013 - 4 déc. 2013 à 17:56
Salut les kids,
Je cherche à faire un menu déroulant en utilisant le css.

Voilà mon code html: 

<!DOCTYPE html>

	<html>
		<head>
			<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="style.css"/>
			<meta charset="utf-8" />
			<title>test menu</title>
		</head>
		
		<body>
			<header>
			<nav id="nav">
				<div id="id_client">
					<p>nom client, adresse, cp, ville</p>
				</div>
				<div id="background_menu">
					<div id="menu">
						<ul>
							<div class="element_menu">
								<li><a href="mon_compte.html">Mon compte</a></li>
									<div id="sub_menu">
										<ul>
											<li><a href="user.html">Utilisateur</a></li>
											<li><a href="adress_livr.html">Adresse de livraison</a></li>
											<li><a href="gest_tarif.html">Gestion des tarifs</a></li>
											<li><a href="lieux_repres.html">Lieux représentation</a></li>
											<li><a href="log_out.html">Déconnection</a></li>
										</ul>
									</div>
							</div>
							<div class="element_menu">
								<li><a href="preparation_commande.html">Préparation de la commande</a></li>
									<div id="sub_menu">
										<ul>
											<li><a href="billeterie.html">Billeterie</a></li>
											<li><a href="bracelet.html">Bracelet</a></li>
											<li><a hraf="reassort.html">Réassort</a></li>
										</ul>
									</div>
							</div>
							<div class="element_menu">
								<li><a href="demandes_envoyees.html">Demandes envoyées (*)</a></li>
							</div>
							<div class="element_menu">
								<li><a href="demande.html">Ma demande</a></li>
							</div>
							<div class="element_menu">
								<li><a href="aide.html">Aide</a></li>
							</div>
						</ul>
					</div>
				</div>
			</nav>
			</header>
		</body>
	</html>


et voici mon css 

#nav{



}



#background_menu{

	display:block;

	margin-top:0px;

	margin-left:auto; 

	margin-right:auto; 

	background-color:#666666;

	width:100%; 

	height:42px;

	float:left;

}



#menu{

	float:left;

	height:100%;

	margin-left:190px;



}



.element_menu{

	float:left;

	margin-left: 20px;

	margin-right: 20px;

	vertical-align:middle;

	font-family:arial, sans serif;

	color:white;

}



.element_menu a:hover{

	color:#FF9900;

	text-decoration:none;

}



.element_menu ul li ul{

	display:none;

}



#sub_menu ul{

	margin:0;

	padding:0;

	list-style-type:none;

	text-align:center;

}



#sub_menu  li {

	float:left;

	margin:auto;

	padding:0;

	background-color:#666666;

}



#sub_menu li a {

	display:block;

	width:100px;

	color:white;

	text-decoration:none;

	padding:5px;

}



#sub_menu ul li {

	display:none;

}



#sub_menu li:hover  ul li{

	float:none;

}



#sub_menu ul li:hover  ul{

	display:block;

}



ul{

	list-style-type:none;

}

	

a {

	color: white;

	text-decoration: none;

}



#id_client{

	display:block; 

	background-color:black;

	width:100%; 

	height:70px;

	float:left;

	font-family:arial, sans serif;

	color:#666666;

	

}



#id_client p{

	text-align:right;

	margin-right:190px;

	padding-top:30px;

}











le menu ne se déroule pas, si quelqu'un peut me donner une explication je lui en serrait éternellement reconnaissant =)



Merci d'avance !            
                

    
    

    
            

            

    

    
    

        A voir également:         
    




    

        
        

                
2 réponses

        

        
    


            

        
        
        

                        Réponse 1 / 2
        


                

                

        

                    

        


     
             

            
    
    

                
            

    


        
        

                

        


     
             

                    animostab
    
        
    
                    Messages postés
            
                


     
             

            2829
        
            
                            Date d'inscription
            jeudi 10 mars 2005
                            Statut
            Membre
                            Dernière intervention
            11 novembre 2019
            

            


     
             

                    737
    
        

                    

                    Modifié par animostab le  4/12/2013 à 17:35
                        

    


    

                        

                    Salut



voici un tuto

http://css.mammouthland.net/menu-horizontal-deroulant-en-css.php



je n'ai pas regardé tout le code mais le problème doit venir des div dans le ul et aussi du fait que ce n'est pas placé après le </a> mais après le </li>



(on ne mets pas de div dans un ul mais seulement des li, accesoirement on peux mettre un div imbriqué dans un li)



Pour un menu deroulant on imbrique des ul (le sous menu qui se déroule) dans les li apres <a href="page">lien</a>

 

Un petit merci vaut mieux qu'une grande ignorance
                
                

    
        

    
            
        1
                                
                
    

            



    

        
        
    


        

        

                    

    

        

                    

            

        

        
        
        

                        Réponse 2 / 2
        


                    
                    

                

        

                    

        


     
             

            
    
    

                
            

    


        
        

                

        


     
             

                    a6dik
    
        
    
                    Messages postés
            
                


     
             

            2
        
            
                            Date d'inscription
            mercredi  4 décembre 2013
                            Statut
            Membre
                            Dernière intervention
             4 décembre 2013
            

                    

                     4 déc. 2013 à 17:56
                        

    


    

                        

                    je pense que je vais remanier mon code à la manière du tuto que tu m'as filer, 

encore merci!
                
                

    
        

    
            
        0
                                
                
    

            



    

        
        
    


        

        

                    

    

        

                    

            

        

    



    
Discussions similaires

                                                    

                
                    Suppression listes déroulantes
                    

                        
    
    

            

    


                        

                                                                                    Archa -  

                            
                                                                                    Sam - 
                        

                    

                    

                    

                        5 réponses
                    

                
            

                                                        

                
                    Supprimer liste déroulante Excel
                    

                        
    
    

            

    


                        

                                                                                    SamAlex -  

                            
                                                                                    b@bd - 
                        

                    

                    

                    

                        8 réponses
                    

                
            

                                                        

                
                    Effacer liste déroulante
                    

                        
    
    

            

    


                        

                                                                                    gabrielle -  

                            
                                                                                    jmps - 
                        

                    

                    

                    

                        3 réponses
                    

                
            

                                                        

                
                    supprimer une liste déroulante
                    

                        
    
    

            

    


                        

                                                                                    fred94 -  

                            
                                                                                    m@rina - 
                        

                    

                    

                    

                        3 réponses
                    

                
            

                                                        

                
                    Supprimer Liste déroulante
                    

                        
    
    

            

    


                        

                                                                                    Good -  

                            
                                                                                    Good - 
                        

                    

                    

                    

                        2 réponses