Correction menu deroulant à plusieurs niveaux

Gauns -  
animostab Messages postés 3003 Date d'inscription   Statut Membre Dernière intervention   -
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;}

3 réponses

  1.
    animostab Messages postés 3003 Date d'inscription   Statut Membre Dernière intervention   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
    1. 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
    2. animostab Messages postés 3003 Date d'inscription   Statut Membre Dernière intervention   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
  3. Gauns
     
    bonjour, svp quelqu'un peut me donner une idée
    0

Discussions similaires

Comment faire afin d'accéder au boot menu ou BIOS sous MSI ?
Kaheil -
Ismo87 -

7 réponses
Comment activer le Bluetooth sur une TV Samsung ?
zaraki490 -
Marjo -

110 réponses