Exercices sur la mise en forme des menus en CSS

gestion des menus déroulants verticaux en CSS

Écrire une page xHTML contenant une menu déroulant :

les menus de premier niveau seront présentés sous forme d'une liste verticale,
les sous-menus seront placés horizontalement relativement au menu du niveau précédent,
les éléments des menus seront contenus dans des listes HTML non triées (type ul)
il y aura une liste HTML située au moins au quatrième niveau hiérarchique,
Utiliser les fonctions de transition afin d'avoir un menu avec un comportement dynamique.

Fichier à produire :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  <title>Exemple de menu déroulant vertical</title>
  <style type="text/css">
    body {
      background-color:#CCC;
      color:#006;
    }
 
    h1 {text-align:center;}
 
    div#menu ul li>ul,
    div#menu ul li>ul>li>em {
      -webkit-transition-timing-function:ease-in;
      -webkit-transition-property:line-height,left,letter-spacing;
      -webkit-transition-duration:0.5s;
      -o-transition-timing-function:ease-in;
      -o-transition-property:line-height,left,letter-spacing;
      -o-transition-duration:0.5s;
      -moz-transition-timing-function:ease-in;
      -moz-transition-property:line-height,left,letter-spacing;
      -moz-transition-duration:0.5s;
      transition-timing-function:ease-in;
      transition-property:line-height,left,letter-spacing;
      transition-duration:0.5s;
    }
 
    /* éliination des marges, bordures et retraits sur tous es élémnets des menus */
    div#menu * {
      margin:0;
      padding:0;
      border-style:none;
    }
 
    div#menu>ul {
      float:left;
    }
 
    /* les éléments sont tous de ce style */
    div#menu li {
      text-align:center;
      position:relative;
      display:block;
    }
 
    /* Configuration par défaut des labels de menus */
    div#menu em {
      border:solid;
      border-width:1px 0 0 0;
      color:#FFF;
      position:relative;
      display:block;
      overflow:hidden;
    }
 
    div#menu li.sousmenu>em {
      background-color:#444;
      color:#FF0;
    }
 
    /* les menus de profondeur supérieure à 1 s'afficheront a droite */
    /* l'affichage des menus de profodeur inférieure est désactivé */
    div#menu li>ul {
      top:0;
      left:0;
      position:absolute;
    }
    div#menu ul>li>ul>li>em {
      line-height:0;
      border-width:0;
       /*letter-spacing:-1em;*/
    }
 
 
    /* mais il revient dès que son père est survolé */
    div#menu li:hover>ul {
      left:100%;
    }
 
    /* et survol les éléments prennennt cette couleur */
    div#menu li:hover>em {
      background-color:#88F;
    }
 
    div#menu li:hover>ul>li>em {
      line-height:1em;
      /*letter-spacing:0;*/
      border-width:1px 0 0 0;
    }
 
    /* gestion de l'empilement des éléments de menu (il faut inverser) */
    div#menu>ul>li>em {
      z-index:9;
      background-color:#630;
    }
    div#menu>ul>li>* {
      z-index:8;
    }
    div#menu>ul>li>ul>li>em {
      z-index:8;
      background-color:#888;
    }
    div#menu>ul>li>ul>li>* {
      z-index:7;
      background-color:#666;
    }
    div#menu>ul>li>ul>li>ul>li>em {
      z-index:7;
      background-color:#444;
    }
    div#menu>ul>li>ul>li>ul>li>* {
      z-index:6;
    }
    div#menu>ul>li>ul>li>ul>li>ul>li>em {
      z-index:6;
      background-color:#222;
    }
    div#menu>ul>li>ul>li>ul>li>ul>li>* {
      z-index:5;
    }
 
    div#menu>ul>li>ul>li>ul>li>ul>li>ul>li>em {
      z-index:5;
      background-color:#000;
    }
    div#menu>ul>li>ul>li>ul>li>ul>li>ul>li>* {
      z-index:4;
    }
    p {clear:both}
  </style>
</head>
<body>
  <h1>Menu déroulant vertical</h1>
 
  <div id="menu">
    <ul>
      <li><em>menu 1 sur une lignes</em></li>
      <li class="sousmenu"><em>menu 2<br/>sur deux lignes</em><ul>
	<li><em>Sous menu 2.1</em></li>
	<li><em>Sous menu 2.2</em></li>
	<li class="sousmenu"><em>Sous menu 2.3</em><ul>
	  <li class="sousmenu"><em>Sous menu 2.3.1<br/>sur deux lignes</em><ul>
	    <li><em>Sous menu 2.3.1.1</em></li>
	    <li class="sousmenu"><em>Sous menu 2.3.1.2</em><ul>
	      <li><em>Sous menu 2.3.1.2.1</em></li>
	      <li><em>Sous menu 2.3.1.2.2</em></li>
	      <li><em>Sous menu 2.3.1.2.3</em></li>
	      <li><em>Sous menu 2.3.1.2.3</em></li></ul></li></ul></li></ul></li>
        <li><em>Sous menu 2.4</em></li></ul></li>
      <li><em>menu 3<br/>sur<br/>trois lignes</em></li>
      <li class="sousmenu"><em>menu 4<br/>sur<br/>quatre<br/>lignes</em><ul>
           <li class="sousmenu"><em>Sous menu 4.1</em><ul>
               <li><em>Sous menu 4.1.1</em></li>
               <li><em>Sous menu 4.1.2</em></li>
               <li><em>Sous menu 4.1.3</em></li>
	     </ul>
           </li>
           <li class="sousmenu"><em>Sous menu 4.2</em>
             <ul>
               <li><em>Sous menu 4.2.1</em></li>
               <li><em>Sous menu 4.2.2</em></li>
               <li><em>Sous menu 4.2.3</em></li>
	     </ul>
           </li>
           <li><em>Sous menu 4.3</em></li>
         </ul>
      </li>
      <li><em>menu 5</em></li>
    </ul>
  </div>
 
  <p><a href="http://validator.w3.org/check?uri=referer">page xHTML valide</a> et
  <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS valide</a></p>
</body>
</html>

voir le résultat

gestion des menus déroulants horizontaux en CSS

Écrire une page xHTML contenant une menu déroulant :

le menu premier niveau sera présenté horizontalement
les sous-menus (second niveau) seront placés verticalement et au dessous du menu du niveau précédent,
les sous-menus de toisième niveau et plus seront placés à droite du menu du niveau précédent,
Afin de rendre na navigation plus facile, des images indiqueront la présence de sous-menus :
- les menus de premier niveau utiliseront cette image
- les menus des autres niveaux utiliseront cette image
Les éléments des menus seront contenus dans des listes HTML non triées (type ul)
Afin de endre le menu plus attrayant faire en sorte que les actions de déroulement soint progressives)

Fichier à produire :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  <title>Exemple de menu déroulant horizontal</title>
  <style type="text/css">
    body {
     background-color:#CCC;
     color:#006;
    }
 
    h1 {text-align:center;}
 
    /* Mise en place des temporisation dynamiques sur transitions des éléments à cacher */
    div#menu ul li>ul,
    div#menu ul li>ul>li>em {
      -webkit-transition-property:line-height,left;
      -webkit-transition-duration:1s;
      -moz-transition-property:line-height,left;
      -moz-transition-duration:1s;
      -o-transition-property:line-height,left;
      -o-transition-duration:1s;
      transition-property:line-height,left;
      transition-duration:1s;
    }
 
    /* élimination de toutes marges et retraits sur tous les éléments du menu */
    div#menu * {
     padding: 0;
     margin: 0;
    }
 
    /* pour afficher les flèches */
    div#menu li.sousmenu>em {
      background-image: url(fleche_bas.png);
      background-position: 97% 50%;
      background-repeat:no-repeat;
      padding-right:2em;
    }
 
    div#menu li.sousmenu li.sousmenu>em {
      background-image: url(fleche_droite.png);
      background-position: 97% 50%;
      background-repeat:no-repeat;
      padding-right:2em;
    }
 
    /* la première ligne est horizontale et grise */
    div#menu>ul>li {
      background-color:#888;
      float:left;
    }
 
    /* Configuration par défaut des item de menus */
 
/*    div#menu li li ul {
      position:relative;
    }

    div#menu li li li {
      position:absolute;
    }*/
 
    div#menu li {
      position:relative;
      text-align:center;
      list-style: none;
      color:#FFF;
      }
 
    /* Configuration par défaut des labels de menus */
    div#menu em {
      border:solid;
      border-width:1px 0 0 0;
      /*width:12em;*/
      position:relative;
      display:block;
      overflow:hidden;
      padding:0 1em;
    }
 
    /* tous les menus de profondeur supérieure à 1 sont en absolu*/
    div#menu ul ul {
      position:absolute;
    }
 
    /* restauration largeur et hauteur au survol du curseur de la souris */
    div#menu ul li li:hover>ul {
      left:100%;
    }
    div#menu ul li:hover>ul>li>em {
      line-height:100%;
      border-width:1px 0 0 0;
    }
 
    /* gestion de l'empilement des éléments de menu (il faut inverser) */
    div#menu>ul>li>ul>li>em {
      background-color:#964;
      z-index:8;
    }
    div#menu>ul>li>ul>li>* {
      z-index:7;
    }
    div#menu>ul>li>ul>li>ul>li>em {
      z-index:7;
    }
    div#menu>ul>li>ul>li>ul>li>* {
      z-index:6;
    }
    div#menu>ul>li>ul>li>ul>li>ul>li>em {
      z-index:6;
    }
    div#menu>ul>li>ul>li>ul>li>ul>li>* {
      z-index:5;
    }
 
    /* les menus de profondeur supérieure à 2 s'afficheront a droite */
    div#menu ul>li>ul>li>ul {top:0;left:0}
    div#menu ul>li>ul>li>em {line-height:0;border-width:0}
 
    /* rajout de couleur de fond et de survol */
    div#menu ul ul ul li>em {background-color: #00F}
    div#menu ul ul ul li>em:hover {background-color: #9Cf}
    div#menu li li>em:hover {background-color: #88F}
    div#menu>ul>li>em:hover {
      background-color: #EF8;
      color:#630;
    }
 
    p {
     padding-top:25ex;
     clear:both;
    }
 
  </style>
</head>
<body>
  <h1>Menu déroulant horizontal</h1>
 
  <div id="menu">
    <ul>
      <li><em>menu 1 sur une ligne</em></li>
      <li class="sousmenu"><em>menu 2absolute<br/>sur deux lignes</em><ul>
	<li><em>Sous menu 2.1</em></li>
	<li><em>Sous menu 2.2</em></li>
	<li class="sousmenu"><em>Sous menu 2.3</em><ul>
	  <li class="sousmenu"><em>Sous menu 2.3.1</em><ul>
	    <li><em>Sous menu 2.3.1.1</em></li>
	    <li class="sousmenu"><em>Sous menu 2.3.1.2</em><ul>
	      <li><em>Sous menu 2.3.1.2.1</em></li>
	      <li><em>Sous menu 2.3.1.2.2</em></li>
	      <li><em>Sous menu 2.3.1.2.3</em></li>
	      <li><em>Sous menu 2.3.1.2.3</em></li></ul></li></ul></li></ul></li>
        <li><em>Sous menu 2.4</em></li></ul></li>
      <li><em>menu 3</em></li>
      <li class="sousmenu"><em>menu 4</em><ul>
           <li class="sousmenu"><em>Sous menu 4.1</em><ul>
               <li><em>Sous menu 4.1.1</em></li>
               <li><em>Sous menu 4.1.2</em></li>
               <li><em>Sous menu 4.1.3</em></li>
	     </ul>
           </li>
           <li class="sousmenu"><em>Sous menu 4.2</em>
             <ul>
               <li><em>Sous menu 4.2.1</em></li>
               <li><em>Sous menu 4.2.2</em></li>
               <li><em>Sous menu 4.2.3</em></li>
	     </ul>
           </li>
           <li><em>Sous menu 4.3</em></li>
         </ul>
      </li>
      <li><em>menu 5</em></li>
    </ul>
  </div>
 
  <p><a href="http://validator.w3.org/check?uri=referer">page xHTML valide</a> et
    <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS valide</a></p>
</body>
</html>

voir le résultat

gestion des menus déroulants horizontaux en CSS

Écrire une page xHTML contenant une menu déroulant :

le menu premier niveau sera présenté horizontalement
les sous-menus (second niveau) seront placés verticalement et au dessous du menu du niveau précédent,
les sous-menus de toisième niveau et plus seront placés à droite du menu du niveau précédent,
Afin de rendre na navigation plus facile, des images indiqueront la présence de sous-menus :
- les menus de premier niveau utiliseront cette image
- les menus des autres niveaux utiliseront cette image
Les éléments des menus seront contenus dans des listes HTML non triées (type ul)
Afin de endre le menu plus attrayant faire en sorte que les actions de déroulement soint progressives)

Fichier à produire :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  <title>Exemple de menu déroulant horizontal</title>
  <style type="text/css">
    body {
     background-color:#CCC;
     color:#006;
    }
 
    h1 {text-align:center;}
 
    /* Mise en place des temporisation dynamiques sur transitions des éléments à cacher */
    div#menu ul li>ul,
    div#menu ul li:hover>ul {
      -webkit-transition-property:-webkit-transform;
      -webkit-transition-duration:1s;
      -moz-transition-property:-moz-transform;
      -moz-transition-duration:1s;
      -o-transition-property:line-height,left;
      -o-transition-duration:1s;
      transition-property:line-height,left;
      transition-duration:1s;
    }
 
    /* élimination de toutes marges et retraits sur tous les éléments du menu */
    div#menu * {
     padding: 0;
     margin: 0;
    }
 
    /* pour afficher les flèches */
    div#menu li.sousmenu>em {
      background-image: url(fleche_bas.png);
      background-position: 97% 50%;
      background-repeat:no-repeat;
      padding-right:2em;
    }
 
    div#menu li.sousmenu li.sousmenu>em {
      background-image: url(fleche_droite.png);
      background-position: 97% 50%;
      background-repeat:no-repeat;
      padding-right:2em;
    }
 
    /* la première ligne est horizontale et grise */
    div#menu>ul>li {
      background-color:#888;
      float:left;
    }
 
    /* Configuration par défaut des item de menus */
 
/*    div#menu li li ul {
      position:relative;
    }

    div#menu li li li {
      position:absolute;
    }*/
 
    div#menu li {
      position:relative;
      text-align:center;
      list-style: none;
      color:#FFF;
      }
 
    /* Configuration par défaut des labels de menus */
    div#menu em {
      border:solid;
      border-width:1px 0 0 0;
      /*width:12em;*/
      position:relative;
      display:block;
      overflow:hidden;
      padding:0 1em;
    }
 
    /* tous les menus de profondeur supérieure à 1 sont en absolu*/
    div#menu ul ul {
      position:absolute;
    }
 
    /* restauration largeur et hauteur au survol du curseur de la souris */
    div#menu ul li li:hover>ul {
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -o-transform: scale(1);
      transform: scale(1);
    }
 
    /* gestion de l'empilement des éléments de menu (il faut inverser) */
    div#menu>ul>li>ul>li>em {
      background-color:#964;
    }
 
    /* les menus de profondeur supérieure à 2 s'afficheront a droite */
    div#menu ul>li>ul>li>ul {
      top:0;
      left:100%;
      -webkit-transform:scale(1,0) translate(0,50%);
      -moz-transform:scale(1,0) translateX(50%);
      -o-transform:scale(1,0) translateX(50%);
      transform:scale(1,0) translateX(50%);
    }
 
    /* rajout de couleur de fond et de survol */
    div#menu ul ul ul li>em {background-color: #00F}
    div#menu ul ul ul li>em:hover {background-color: #9Cf}
    div#menu li li>em:hover {background-color: #88F}
    div#menu>ul>li>em:hover {
      background-color: #EF8;
      color:#630;
    }
 
    p {
     padding-top:25ex;
     clear:both;
    }
 
  </style>
</head>
<body>
  <h1>Menu déroulant horizontal</h1>
 
  <div id="menu">
    <ul>
      <li><em>menu 1 sur une ligne</em></li>
      <li class="sousmenu"><em>menu 2absolute<br/>sur deux lignes</em><ul>
	<li><em>Sous menu 2.1</em></li>
	<li><em>Sous menu 2.2</em></li>
	<li class="sousmenu"><em>Sous menu 2.3</em><ul>
	  <li class="sousmenu"><em>Sous menu 2.3.1</em><ul>
	    <li><em>Sous menu 2.3.1.1</em></li>
	    <li class="sousmenu"><em>Sous menu 2.3.1.2</em><ul>
	      <li><em>Sous menu 2.3.1.2.1</em></li>
	      <li><em>Sous menu 2.3.1.2.2</em></li>
	      <li><em>Sous menu 2.3.1.2.3</em></li>
	      <li><em>Sous menu 2.3.1.2.3</em></li></ul></li></ul></li></ul></li>
        <li><em>Sous menu 2.4</em></li></ul></li>
      <li><em>menu 3</em></li>
      <li class="sousmenu"><em>menu 4</em><ul>
           <li class="sousmenu"><em>Sous menu 4.1</em><ul>
               <li><em>Sous menu 4.1.1</em></li>
               <li><em>Sous menu 4.1.2</em></li>
               <li><em>Sous menu 4.1.3</em></li>
	     </ul>
           </li>
           <li class="sousmenu"><em>Sous menu 4.2</em>
             <ul>
               <li><em>Sous menu 4.2.1</em></li>
               <li><em>Sous menu 4.2.2</em></li>
               <li><em>Sous menu 4.2.3</em></li>
	     </ul>
           </li>
           <li><em>Sous menu 4.3</em></li>
         </ul>
      </li>
      <li><em>menu 5</em></li>
    </ul>
  </div>
 
  <p><a href="http://validator.w3.org/check?uri=referer">page xHTML valide</a> et
    <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS valide</a></p>
</body>
</html>

voir le résultat

positionner un style en fonction du médium

Pour cet exercice :

nous allons prendre une page présentant une liste pouvant être utilisée en tant que menu.
cette liste sera placée dans un élément de type nav.
nous choisirons une liste de type ul.
pour toute fenêtre supérieure à 10cm de large nous disposerons les éléments du menu côte à côte.
pour toute fenêtre inférieur ou égale à 10cm de large nous disposerons les éléments du menu les un au dessus des autres et nous ferons en sorte que :
- les éléments occupent toute la largeur,
- les éléments présentent une police plus grande (150%).

Fichier à produire :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  <title>Exemple de menu déroulant horizontal</title>
  <style type="text/css">
    body {
     background-color:#CCC;
     color:#006;
    }
 
    h1 {
     text-align:center;
     clear:both;
    }
 
    @media only screen and (min-width:100mm) and (min-device-width:100mm) {
      /* élimination de toutes marges et retraits sur tous les éléments du menu */
      nav * {
        padding: 0;
        margin: 0;
      }
 
      /* pour afficher les flèches */
      nav li.sousmenu {
        background-image: url(fleche_bas.png);
        background-position: 97% 50%;
        background-repeat:  no-repeat;
      }
      nav li.sousmenu li.sousmenu {
        background-image: url(fleche_droite.png);
        background-position: 97% 50%;
        background-repeat:  no-repeat;
      }
 
      /* la première ligne est horizontale et grise */
      nav>ul>li {
        background-color:#888;
        float:left;
      }
 
      /* tous les menus de profondeur supérieure à 1 sont en absolu et n'apparaissent pas par défaut */
      nav ul ul {
        position:absolute;
        display:none;
        width:10em;
      }
      nav li {
        background-color:#964;
        text-align:center;
        position:relative;
        list-style: none;
        border-top: 1px solid;
        text-decoration: none;
        width:10em;
        color:#FFF;
      }
 
      /* les menus de profondeur supérieure à 2 s'afficheront a droite */
      nav ul>li>ul>li>ul {top:-1px;left:10em;}
 
      /* affichage au survol des menus ne profondeur supérieure */
      nav ul>li:hover>ul {display:block}
 
      /* rajout de couleur de fond et de survol */
      nav ul ul ul li {background-color: #00F}
      nav ul ul ul li:hover {background-color: #9Cf}
      nav li li:hover {background-color: #88F}
      nav>ul>li:hover {
        position:relative;
        background-color: #EF8;
        color:#630;
      }
 
      p {
        padding-top:10em;
        clear:both;
      }
    }
 
    @media screen and (max-width:100mm), screen and (max-device-width: 100mm), handheld {
       nav{font-size:150%}
 
       nav ul {
         display:block;
         margin:0;
         padding-left:0;
      }
 
       nav li h4 {
         text-align:center;
         background-color: #FCC;
         margin:0.2em 0;
         display:block;
         border-width:0.2em 0;
         border-style:solid;
         border-color:red;
      }
       nav li li h4 {
         background-color: #CFC;
         border-color:green;
      }
       nav li li li h4 {
         background-color: #CCF;
         border-color:blue;
      }
       nav li li li li h4 {
         background-color: #FFC;
         border-color:yellow;
      }
    }
 
    @media all and (orientation:landscape) {
      body {background-color:red}
    }
  </style>
</head>
<body>
  <nav>
    <ul>
      <li><h4>menu 1</h4></li>
      <li class="sousmenu"><h4>menu 2</h4><ul>
	<li><h4>Sous menu 2.1</h4></li>
	<li><h4>Sous menu 2.2</h4></li>
	<li class="sousmenu"><h4>Sous menu 2.3</h4><ul>
	  <li class="sousmenu"><h4>Sous menu 2.3.1</h4><ul>
	    <li><h4>Sous menu 2.3.1.1</h4></li>
	    <li class="sousmenu"><h4>Sous menu 2.3.1.2</h4><ul>
	      <li><h4>Sous menu 2.3.1.2.1</h4></li>
	      <li><h4>Sous menu 2.3.1.2.2</h4></li>
	      <li><h4>Sous menu 2.3.1.2.3</h4></li>
	      <li><h4>Sous menu 2.3.1.2.3</h4></li></ul></li></ul></li></ul></li>
        <li><h4>Sous menu 2.4</h4></li></ul></li>
      <li><h4>menu 3</h4></li>
      <li class="sousmenu"><h4>menu 4</h4>
         <ul>
           <li class="sousmenu"><h4>Sous menu 4.1</h4>
             <ul>
               <li><h4>Sous menu 4.1.1</h4></li>
               <li><h4>Sous menu 4.1.2</h4></li>
               <li><h4>Sous menu 4.1.3</h4></li>
	     </ul>
           </li>
           <li class="sousmenu"><h4>Sous menu 4.2</h4>
             <ul>
               <li><h4>Sous menu 4.2.1</h4></li>
               <li><h4>Sous menu 4.2.2</h4></li>
               <li><h4>Sous menu 4.2.3</h4></li>
	     </ul>
           </li>
           <li><h4>Sous menu 4.3</h4></li>
         </ul>
      </li>
      <li><h4>menu 5</h4></li>
    </ul>
  </nav>
 
  <h1>Auto adaptation.</h1>
 
  <p>Le menu s'adaptera à un téléphone mobile ou à tout dispositif dont la fenêtre d'affichage sera inférieure à 10cm de large</p>
 
  <h2>Vous pouvez faire le test en diminuant la taille de la fenêtre.</h2>
 
  <p><a href="http://validator.w3.org/check?uri=referer">page xHTML valide</a> et
    <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS valide</a></p>
</body>
</html>

Exercices sur la mise des forme des menus en CSS

gestion des menus déroulants verticaux en CSS

Fichier à produire :

voir le résultat

gestion des menus déroulants horizontaux en CSS

Fichier à produire :

voir le résultat

gestion des menus déroulants horizontaux en CSS

Fichier à produire :

voir le résultat

positionner un style en fonction du médium

Fichier à produire :

voir le résultat