Correction menu deroulant à plusieurs niveaux

Gauns -  
animostab Messages postés 3003 Statut Membre -
Bonjour
je suis entrain d'aider un ami alors que moi je meme suis aussi debutant en html et css
j'ai suivi un tuto pour lui faire le menu mais là je dois lui faire les sous menus et
je n'y arrive pas. Si quelqu'un peut m'aider svp, je veux rajouter un sous menu mathématique : algebre et geo voilà le code sur lequel je me suis basé
MERCI 
<div class="navigation">
        <ul>
          <li><a href="http://index.php">Accueil</a></li>
         <li><a href="http://livres.php">Livres</a></li>
          <li><a href="#">Cours</a>
            <ul>
              <li><a href="">Mathématique</a></li>    
<ul>
 <li><a href="">Algèbre</a></li>  
 <li><a href="">Géo</a></li>  
</ul>
              <li><a href="">Science</a></li>
              <li><a href="">francais</a></li>
              <li><a href="">anglais</a></li>
            
            </ul>
          </li>
          <li class="last-nav"><a href="">contact</a></li>
          
        </ul>
      </div>

 .navigation {
 float:right;
 width:725px;
 padding-top:20px;
}
.navigation ul{
 float: right;
 margin:0;
 padding:0;}
.navigation ul li {
 display:inline-block;
 padding: 0px 10px}
.last-nav  {
 padding:0 0 0 15px !important}

.navigation ul li a{
 position:relative;
 z-index:8;
 font-family:'Federo', arial;
 color:#fd3cc0;
 text-decoration:none;
 font-size:15px;
 padding:0 5px 7px 2px;
 transition: all 0.3s ease;
 -moz-transition: all 0.3s ease;
 -ms-transition: all 0.3s ease;
 -o-transition: all 0.3s ease;
 -webkit-transition: all 0.3s ease;}
.navigation ul li ul li a{ font-family:Arial, Helvetica, sans-serif; line-height:25px; font-size:14px;}
.navigation ul li ul {
 float:left;
 margin-top:7px;
 padding:10px;
 background: rgba(255, 255, 255, 0.9);
 position:absolute;
 z-index:6;
 width:165px;
 display:none}

 .navigation li ul li a:hover {
  text-decoration:underline;
 }
.navigation li ul li a:hover {
 color: #fd3cc0;
 border:none;}
.navigation ul li:hover  ul {
 display:block}

.navigation ul li a:hover ul  {
 display:block}
.navigation a:hover{
 border-bottom:3px solid #fd3cc0;
 transition: all 0.3s ease;
 -moz-transition: all 0.3s ease;
 -ms-transition: all 0.3s ease;
 -o-transition: all 0.3s ease;
 -webkit-transition: all 0.3s ease;}
A voir également:

3 réponses

Réponse 1 / 3
animostab Messages postés 3003 Statut Membre 738
 
Bonjour

voici le code corrigé

html 
<div class="navigation">
        <ul>
          <li><a href="http://index.php">Accueil</a></li>
         <li><a href="http://livres.php">Livres</a></li>
          <li><a href="#">Cours</a>
            <ul>
              <li><a href="">Mathématique</a>   
<ul>
 <li><a href="">Algèbre</a></li>  
 <li><a href="">Géo</a></li>  
                  </ul></li></ul>
              <li><a href="">Science</a></li>
              <li><a href="">francais</a></li>
              <li><a href="">anglais</a></li>
            
            
          </li>
          <li class="last-nav"><a href="">contact</a></li>
          
        </ul>
      </div>


css 

.navigation {
 float:right;
 width:725px;
 padding-top:20px;
}
.navigation ul{
 float: right;
 margin:0;
 padding:0;}
.navigation ul li {
 display:inline-block;
 padding: 0px 10px}
.last-nav  {
 padding:0 0 0 15px; !important}

.navigation ul li a{
 position:relative;
 z-index:8;
 font-family:'Federo', arial;
 color:#fd3cc0;
 text-decoration:none;
 font-size:15px;
 padding:0 5px 7px 2px;
 transition: all 0.3s ease;
 -moz-transition: all 0.3s ease;
 -ms-transition: all 0.3s ease;
 -o-transition: all 0.3s ease;
 -webkit-transition: all 0.3s ease;}
    
.navigation ul li ul li a{ font-family:Arial, Helvetica, sans-serif; line-height:25px; font-size:14px;}
.navigation ul li ul, .navigation ul li ul li ul  {
 float:left;
 margin-top:7px;
 padding:10px;
 background: rgba(255, 255, 255, 0.9);
 position:absolute;
 z-index:6;
 width:165px;
 display:none;}

 .navigation li ul li a:hover {
  text-decoration:underline;
 }
.navigation li ul li a:hover {
 color: #fd3cc0;
 border:none;}

.navigation ul li:hover ul   {
 display:block;}

.navigation ul li:hover ul li ul   {
 display:none;}

.navigation ul li ul li:hover ul   {
 display:block;
margin:0;}
    
.navigation a:hover{
 border-bottom:3px solid #fd3cc0;
 transition: all 0.3s ease;
 -moz-transition: all 0.3s ease;
 -ms-transition: all 0.3s ease;
 -o-transition: all 0.3s ease;
 -webkit-transition: all 0.3s ease;}


voila un petit merci ne sera pas refusé sit tu continue a poster ici songe a t'enregistrer c'est gratuit
0
Gauns
 
Bonsoir
je tiens tout d'abord à vous remercier pour le temps que vous m'avez consacré ainsi qu pour votre aide.
Je viens de tester le menu mais j'ai un petit soucis c'est que sous le bouton cours je dois avoir:
mathématique:
-algebre
- geo
science
anglais
francais
donc j'ai fais quelques modifications (seulement sur le code html) dans le code que vous m'avez envoyé mais regarder le rendu sur l'image . Ma question svp
comment faire en sorte que mathematique , science, anglais et francais soit l'un sous l'autre (et non pas francais à coté de science) et en survolant mathématique , algèbre et géo soit l'un sous l'autre et décalé un peu plus sur la droite.
MERCI énormément pour votre aide et bon fin de journée 

<div class="navigation">
        <ul>
          <li><a href="http://index.php">Accueil</a></li>
         <li><a href="http://livres.php">Livres</a></li>
          <li><a href="#">Cours</a>
            <ul>
              <li><a href="">Mathématique</a>   
<ul>
 <li><a href="">Algèbre</a></li>  
 <li><a href="">Géo</a></li>  
                  </ul>
              <li><a href="">Science</a></li>
              <li><a href="">francais</a></li>
              <li><a href="">anglais</a></li>
            </li></ul>
            
       
          <li class="last-nav"><a href="">contact</a></li>
          
        </ul>
      </div>
0
animostab Messages postés 3003 Statut Membre 738
 
Code corrigé 

<div class="navigation">
        <ul>
          <li><a href="http://index.php">Accueil</a></li>
         <li><a href="http://livres.php">Livres</a></li>
          <li><a href="#">Cours</a>
            <ul>
              <li><a href="">Mathématique</a>   
<ul>
 <li><a href="">Algèbre</a></li>  
 <li><a href="">Géo</a></li>  
                  </ul></li>
              <li><a href="">Science</a></li>
              <li><a href="">francais</a></li>
              <li><a href="">anglais</a></li>
            </li></ul>
            
          
          <li class="last-nav"><a href="">contact</a></li>
          
        </ul>
      </div>


.navigation {
 float:right;
 width:725px;
 padding-top:20px;
}
.navigation ul{
 float: right;
 margin:0;
 padding:0;}
.navigation ul li {
 display:inline-block;
 padding: 0px 10px}
.last-nav  {
 padding:0 0 0 15px; !important}

.navigation ul li a{
 position:relative;
 z-index:8;
 font-family:'Federo', arial;
 color:#fd3cc0;
 text-decoration:none;
 font-size:15px;
 padding:0 5px 7px 2px;
 transition: all 0.3s ease;
 -moz-transition: all 0.3s ease;
 -ms-transition: all 0.3s ease;
 -o-transition: all 0.3s ease;
 -webkit-transition: all 0.3s ease;}
    
.navigation ul li ul li a{ font-family:Arial, Helvetica, sans-serif; line-height:25px; font-size:14px;}
.navigation ul li ul, .navigation ul li ul li ul  {
 margin-top:7px;
 padding:10px 0;
 background: rgba(255, 255, 255, 0.9);
 position:absolute;
 z-index:6;
 width:100px;
 display:none;}
    
.navigation ul li ul li ul  {position:relative; margin:0; padding:0;}

 .navigation li ul li a:hover {
  text-decoration:underline;
 }
.navigation li ul li a:hover {
 color: #fd3cc0;
 border:none;}

.navigation ul li:hover ul   {
 display:block;}
    
.navigation a:hover{
 border-bottom:3px solid #fd3cc0;
 transition: all 0.3s ease;
 -moz-transition: all 0.3s ease;
 -ms-transition: all 0.3s ease;
 -o-transition: all 0.3s ease;
 -webkit-transition: all 0.3s ease;}


ou 

.navigation {
 float:right;
 width:725px;
 padding-top:20px;
}
.navigation ul{
 float: right;
 margin:0;
 padding:0;}
.navigation ul li {
 display:inline-block;
 padding: 0px 10px}
.last-nav  {
 padding:0 0 0 15px; !important}

.navigation ul li a{
 position:relative;
 z-index:8;
 font-family:'Federo', arial;
 color:#fd3cc0;
 text-decoration:none;
 font-size:15px;
 padding:0 5px 7px 2px;
 transition: all 0.3s ease;
 -moz-transition: all 0.3s ease;
 -ms-transition: all 0.3s ease;
 -o-transition: all 0.3s ease;
 -webkit-transition: all 0.3s ease;}
    
.navigation ul li ul li a{ font-family:Arial, Helvetica, sans-serif; line-height:25px; font-size:14px;}
.navigation ul li ul, .navigation ul li ul li ul  {
 margin-top:7px;
 padding:10px 0;
 background: rgba(255, 255, 255, 0.9);
 position:absolute;
 z-index:6;
 width:100px;
 display:none;}
    
.navigation ul li ul li ul  {position:relative; margin:0; padding:0; display:none;}

 .navigation li ul li a:hover {
  text-decoration:underline;
 }
.navigation li ul li a:hover {
 color: #fd3cc0;
 border:none;}

.navigation ul li:hover ul   {
 display:block;}

.navigation ul li:hover ul li ul  {
 display:none;}

.navigation ul li ul li:hover ul   {
 display:block;}
    
.navigation a:hover{
 border-bottom:3px solid #fd3cc0;
 transition: all 0.3s ease;
 -moz-transition: all 0.3s ease;
 -ms-transition: all 0.3s ease;
 -o-transition: all 0.3s ease;
 -webkit-transition: all 0.3s ease;}


voila
0
Réponse 2 / 3
ReDLoG Messages postés 393 Statut Membre 57
 
Bonsoir,
Evites de poster le même sujet sous un pseudo (légèrement) différent tout simplement parce que tu n'as pas obtenu de réponse à celui-là https://forums.commentcamarche.net/forum/affich-31865620-css-menu-deroulant
Cordialement.
0
Réponse 3 / 3
Gauns
 
bonjour, svp quelqu'un peut me donner une idée
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
menu caché
laurent -
ChariduP -

7 réponses
Supprimer Liste déroulante
Good -
Good -

2 réponses