1. #1
    Membre émérite

    Homme Profil pro
    Webmaster débutant
    Inscrit en
    octobre 2006
    Messages
    6 170
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant
    Secteur : Industrie

    Informations forums :
    Inscription : octobre 2006
    Messages : 6 170
    Points : 2 615
    Points
    2 615
    Billets dans le blog
    1

    Par défaut Sous-menu qui décale le contenu

    Bonjour,

    j'ai un menu déroulant et quand on déroule un sous-menu, le contenu est décalé alors qu'évidemment, le sous-menu devrait s'afficher par dessus le contenu sans le décaler. Que faut-il changer dans le CSS ?

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
     
    <nav >
    <div class="page">
    <ul class="menu">
    <li><a href="#">un menu</a></li>
    <li class="aboveall plus"><a href="#"  >menu</a>
    	<ul>
     
     
    	<li><a href="#">menu 1</a></li>
    	<li><a href="#">menu 2</a></li>
    	<li><a href="#">menu 3</a></li>
    	<li><a href="#">menu 4</a></li>
     
     
     
    	</ul>
     
    </li>
    <li><a href="#">un menu</a></li>
     
     
    </ul>
    </div>
    </nav>
     
     
     
    <TABLE class="table-border  width_2_third underall">
    <tr ><td>bla bla 1</td></tr>
    </table>
    <TABLE class="table-border  width_2_third  underall2">
    <tr ><td>bla bla 2</td></tr>
    </table>

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
     
    .width_2_third {
     width:66%;
     }	
     
     
      .table-border tr td {
      padding:5;
     }
     
     
     
     .table-border{
     border-width:1px;
     border-style:solid; 
     border-color:black;
     }
     
     
     
     
    .page{
      font: normal 2em Arial, Helvetica, sans-serif;
      font-size :1.2em;
      margin: 0;
      width:55.0em;
    }
     
    .menu {
      border-radius: 2em;
      -webkit-border-radius: 2em;
      -moz-border-radius: 2em;
      -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
      -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
      margin:0;
      padding:0;
      background:lightgreen;
      border: 1px solid #48B;
      line-height:2em;
      height:4.5em;
      font-size:0.8em;
      text-align:center;
     
    }
    /* Barre de menu principale */
    .menu a {
      display:block;
      margin:0;
      padding:0.5em;
      font-weight:bold;
      text-decoration:none;
      color:#00F;
    }
    .menu  ul{
      display:none;
      margin:0;
      padding:0;
      left:0;
      top:3.0em; /* hauteur du bandeau principal = hauteur + padding */
      line-height:1.0em;
    }
     
     
    .menu ul.aboveall{
    	position:relative;
    	z-index:9999;
    }
     
    .underall{
    	position:relative;
    	z-index:0;
    }
    .underall2{
    	position:relative;
    	z-index:1;
    }
     
     
    .menu li {
      width:5.0em;
      margin:0 2em;
      padding:0em;
      float:left;
      list-style: none;
      text-align:left;
    }
    /* modification lien sous menus */
    .menu ul li a {
      color:#666;
      font-weight:normal;
    }
    .menu li:hover > a {
    	text-decoration:underline;
    }
    .menu li:hover > ul{
      display: block;
      /* propriétés suivantes mises sur le HOVER, bug sur IE7 */
      background: /*red;*/#FEFEFF;
      border:solid 1px #48B;
    }
     
     
    /* position et dimension des sous menus */
     
    .menu ul li {	
      margin:0;
      width:10.5em;
    }
     
     
    .menu ul ul {
      left:100%; /* décalage de la largeur des LI 100% permet de ne pas gérer la largeur des LI */
      top: -1px; /* tient compte de la largeur de la bordure */
     
    }
     
     
    /* indicateur de présence d'un sous menu */
    li.plus:before{
      content: "\25BA";
      float:right;
      color:#ABC;
      position:relative;
      top:7px;
    }

    https://codepen.io/laurentsc/pen/eepgPm/
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

  2. #2
    Membre confirmé
    Homme Profil pro
    Retraité informatique
    Inscrit en
    juin 2012
    Messages
    373
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Retraité informatique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : juin 2012
    Messages : 373
    Points : 478
    Points
    478

    Par défaut

    J'ai repris ton code.
    ça marche, mais à toi de voir, car j'essaye toujours de me passer de classes:
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    * {
    	box-sizing: border-box;		/* taille des boites width= contenu + padding + border */
    }
    body {
    	font-family: "Times New Roman", Times, serif;
    	font-size: 100%;
    }
    .width_2_third {
    	width: 66%;
    }
    .table-border tr td {
    	padding: 5px;
    }
    .table-border {
    	border-width: 1px;
    	border-style: solid;
    	border-color: black;
    }
     
    /* =====================================================================================*/
    nav {
    	position:relative;
    	font: normal 2em Arial, Helvetica, sans-serif;
    	font-size : 1.2em;
    	margin: 0;
    	width: 55.0em;	
    }
    nav > ul {
    	border-radius: 2em;
    	-webkit-border-radius: 2em;
    	-moz-border-radius: 2em;
    	-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
    	-moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
    	margin: 0;
    	padding: 0;
    	background: lightgreen;
    	border: 1px solid #48B;
    	line-height: 2em;
    	height: 4.5em;
    	font-size: 0.8em;
    	text-align: center;
    }
    nav ul {
    	list-style-type: none;
    	padding:0; 		
    }
    nav li {
    	width: 100px;	
    }
    nav a {	
    	width: 100%;	
    	text-align: center;
    	display: block;
    	margin: 0;
    	padding: 0.5em;
    	font-weight: bold;
    	text-decoration: none;
    	color: #00F;
    }
    nav > ul > li {
    	float:left;						
    }
    nav > ul ul {
    	position:absolute;
    	top:2em;
    	z-index:999;
    	display: none; 					/* on masque */
    }
    /* hover */
    nav li:hover > ul {
    	display: block; 				/* on affiche */
    }
    nav a:hover {
    	text-decoration: underline;	
    }
     
    li.plus:before {
    	content: "\25BA";
    	float: right;
    	color: #ABC;
    	position: relative;
    	top: 7px;
    }
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    <nav >
        <ul>
          <li><a href="#">un menu</a></li>
          <li class="plus"><a href="#"  >menu</a>
            <ul>
              <li><a href="#">menu 1</a></li>
              <li><a href="#">menu 2</a></li>
              <li><a href="#">menu 3</a></li>
              <li><a href="#">menu 4</a></li>
            </ul>
          </li>
          <li><a href="#">un menu</a></li>
        </ul>
    </nav>
     
    <TABLE class="table-border  width_2_third underall">
      <tr >
        <td>bla bla 1</td>
      </tr>
    </table>
    <TABLE class="table-border  width_2_third  underall2">
      <tr >
        <td>bla bla 2</td>
      </tr>
    </table>

  3. #3
    Membre émérite

    Homme Profil pro
    Webmaster débutant
    Inscrit en
    octobre 2006
    Messages
    6 170
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant
    Secteur : Industrie

    Informations forums :
    Inscription : octobre 2006
    Messages : 6 170
    Points : 2 615
    Points
    2 615
    Billets dans le blog
    1

    Par défaut

    Moi, je m'inquiéterais
    Citation Envoyé par JefReb Voir le message
    (J'espère que Jreax62 ne dira pas que c'est une usine à gaz ...
    Même problème
    Citation Envoyé par jreaux62 Voir le message

    Bravo. Encore du grand frankensteinSc.

    A croire que tu as tout oublié pendant l'été...
    Citation Envoyé par JefReb Voir le message
    j'essaye toujours de me passer de classes
    Pourquoi ? T'es fâché ?

    Je continuerai demain. Merci pour ton boulot et j'aurai des questions sur ton code.
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

  4. #4
    Membre confirmé
    Homme Profil pro
    Retraité informatique
    Inscrit en
    juin 2012
    Messages
    373
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Retraité informatique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : juin 2012
    Messages : 373
    Points : 478
    Points
    478

    Par défaut

    Ben non, suis pas faché, mais sans classe je trouve que c'est plus clair.
    bon, parfois, on est obligé d'y passer, mais quand on peut l'éviter le code me paraît plus facile à apréhender.
    Bon c'est mon avis c'est tout.
    par exemple pourquoi mettre:
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
    <nav >
    <div class="page">
    <ul class="menu">
    <li> ...
    ...
    alors que
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
    <nav >
    <ul>
    <li> ...
    ...
    cela fait la même chose et le css est plus clair et il est plus facile de savoir sur quoi et quel sélecteur les proprétés vont s'appliquer.
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
     
    nav {
    	...
    }
    nav > ul {
            ...
    }
    nav   li {
            ...
    }
    Mais encore une fois c'est mon avis. Moins de code= plus simple
    Ce qui ne m'empêche pas parfois de compliquer inutilement!

  5. #5
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 397
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 397
    Points : 20 761
    Points
    20 761

    Par défaut

    Citation Envoyé par JefReb Voir le message
    Mais encore une fois c'est mon avis. Moins de code= plus simple
    J'approuve !

    Citation Envoyé par JefReb Voir le message
    Ce qui ne m'empêche pas parfois de compliquer inutilement!
    J'approuve aussi !
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  6. #6
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 397
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 397
    Points : 20 761
    Points
    20 761

    Par défaut

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <nav >
    <div class="page">
    <ul class="menu">
    Laurent, la balise <nav> sert à indiquer une "navigation" : donc, que fait une class "page" là-dedans ?

    • COMMENCE par écrire un code HTML syntaxiquement et sémantiquement CORRECT.

    • Quant au CSS, ARRETE de mettre des classes à tout bout de champ !!
      Tu compliques tout inutilement !...

    Et je ne parle même pas du design de ton menu
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  7. #7
    Membre émérite

    Homme Profil pro
    Webmaster débutant
    Inscrit en
    octobre 2006
    Messages
    6 170
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant
    Secteur : Industrie

    Informations forums :
    Inscription : octobre 2006
    Messages : 6 170
    Points : 2 615
    Points
    2 615
    Billets dans le blog
    1

    Par défaut

    OK et voici mon besoin d'éclaircissement : si je me fis à http://debray-jerome.developpez.com/...s-en-css3/#LVI, pas moyen de voir la différence entre nav > ul et nav ul. D'après ce que j'ai lu, tous les 2 désignent un ul enfant de nav. Donc quelle est la différence ?

    Autre point :
    Citation Envoyé par jreaux62 Voir le message
    Et je ne parle même pas du design de ton menu
    C'est un code que j'ai repris (ça fait déjà longtemps et je sais plus où) et que je me suis contenté de modifier pour le faire coller à mon besoin.
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

  8. #8
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 397
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 397
    Points : 20 761
    Points
    20 761

    Par défaut

    Il faut lire un peu mieux la DOCUMENTATION.

    • nav ul : TOUS les ul enfants (quel que soit le niveau)
    • nav > ul : uniquement les ul enfants DIRECTS (1er niveau)


    Voilà une base de travail : https://codepen.io/jreaux62/pen/yPYWMz

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    <nav id="menu">
      <ul>
        <li class="hasSub"><a href="javascript:void(0)">menu 1</a>
          <ul>
            <li><a href="#">menu 1.1</a></li>
            <li><a href="#">menu 1.2</a></li>
            <li><a href="#">menu 1.3</a></li>
            <li><a href="#">menu 1.4</a></li>
          </ul>
        </li>
        <li class="hasSub"><a href="javascript:void(0)">ceci est le menu 2</a>
          <ul>
            <li><a href="#">menu 2.1</a></li>
            <li><a href="#">menu 2.2</a></li>
            <li><a href="#">menu 2.3</a></li>
          </ul>
        </li>
        <li><a href="#">menu 3 sans sous-menu</a></li>
        <li class="hasSub"><a href="javascript:void(0)">enfin, voici un menu 4 un peu plus long</a>
          <ul>
            <li><a href="#">menu 4.1</a></li>
            <li><a href="#">menu 4.2</a></li>
          </ul>
        </li>
      </ul>
    </nav>
     
    <div>
     
        <p>bla bla 1</p>
     
        <p>bla bla 2</p>
    </div>
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    /* ----------- MENU ----------- */
    nav {
      position: relative;
    }
    nav ul {
      position: relative;
      margin: 0;
      padding: 0;
      list-style-type: none;
    }
    nav li {
      position: relative;
    }
    nav a {
      position: relative;
      display: block;
    }
    /* ------ MENU niveau 1 ------ */
    nav > ul {
      display: -webkit-flex;
      display: flex;
      -webkit-flex-direction: row;
      flex-direction: row;
    }
    nav > ul > li {
      -webkit-flex: 1 1 auto;
      flex: 1 1 auto; /* menus qui s'adaptent en largeur*/
      /*-webkit-flex:1 1 25%; flex:1 1 25%;*/ /* 4 menus de meme largeur*/
    }
    /* --- MENU niveaux suivants --- */
    nav > ul ul {
      position: absolute;
      width: 100%;
      top: 100%;
      z-index: 999;
      display: none; /* on masque */
      min-width: 120px;
    }
    /* ----------- hover ----------- */
    nav li:hover > ul {
      display: block; /* on affiche */
    }
    nav li:hover {
      background: grey;
    }
    nav li:hover > a {
      color: white;
    }
    /* ----------- DECORATION ----------- */
    nav li {
      background: #ccc;
    }
    nav li li {
      background: #bbb;
    }
    nav a {
      padding: 10px;
      text-decoration: none;
      color: #666;
      font-family: "Arial", sans-serif;
    }
    /* ----------- fleche ----------- */
    li.hasSub:before {
      position: absolute;
      content: "\25bc";
      color: #999;
      bottom: 5px;
      right: 5px;
    }
    li.hasSub:hover:before {
      color: #fff;
    }
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  9. #9
    Membre émérite

    Homme Profil pro
    Webmaster débutant
    Inscrit en
    octobre 2006
    Messages
    6 170
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant
    Secteur : Industrie

    Informations forums :
    Inscription : octobre 2006
    Messages : 6 170
    Points : 2 615
    Points
    2 615
    Billets dans le blog
    1

    Par défaut

    Merci pour la base de travail (que j'avais pas vue en fin de matinée).
    1e question : pourquoi le lien pour les menus de niveau 1 sont javascript:void(0) et pour le niveau 2 # ?

    2e question : comment ajouter un niveau 3 ? J'ai essayé de modifier le code : https://codepen.io/laurentsc/pen/pdgvMN/
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    <nav id="menu">
      <ul>
        <li class="hasSub"><a href="javascript:void(0)">menu 1</a>
          <ul>
            <li><a href="#">menu 1.1</a>
                  <ul>
                     <li><a href="#">menu 1.1.1</a></li>
                     <li><a href="#">menu 1.1.2</a></li>
                  </ul>
            </li>
            <li><a href="#">menu 1.2</a></li>
            <li><a href="#">menu 1.3</a></li>
            <li><a href="#">menu 1.4</a></li>
          </ul>
        </li>
        <li class="hasSub"><a href="javascript:void(0)">ceci est le menu 2</a>
          <ul>
            <li><a href="#">menu 2.1</a></li>
            <li><a href="#">menu 2.2</a></li>
            <li><a href="#">menu 2.3</a></li>
          </ul>
        </li>
        <li><a href="#">menu 3 sans sous-menu</a></li>
        <li class="hasSub"><a href="javascript:void(0)">enfin, voici un menu 4 un peu plus long</a>
          <ul>
            <li><a href="#">menu 4.1</a></li>
            <li><a href="#">menu 4.2</a></li>
          </ul>
        </li>
      </ul>
    </nav>
     
    <div>
     
        <p>bla bla 1</p>
     
        <p>bla bla 2</p>
    </div>

    css pas modifié ; mais je voudrais que le niveau 3 s'affiche à droite du niveau 2 (sauf à gauche pour le dernier menu de niveau 2) et là il s'affiche par dessus le niveau 2 et donc le masque.
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

  10. #10
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 397
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 397
    Points : 20 761
    Points
    20 761

    Par défaut

    Bonjour Laurent,

    comme je l'ai déjà expliqué à JefReb, on met javascript:void(0) pour les liens AVEC sous-menu, à cause des médias TACTILES.
    Il ne faut pas activer le lien en appuyant simplement sur le menu.

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    /* --- MENU niveau 2 et suivants --- */
    nav > ul ul {
      position: absolute;
      width: 100%;
      top: 100%; /* sous-menu DESSOUS */
      left:0;
      z-index: 999;
      display: none; /* on masque */
      min-width: 120px;
    }
    /* --- MENU niveaux 3 et suivants --- */
    nav > ul ul ul {
      position: absolute;
      width: 100%;
      top: 0;
      left:100%; /* sous-menu A DROITE */
    }
    nav > ul > li:last-child ul ul { /* dernier li du 1er ul */
      position: absolute;
      width: 100%;
      top: 0;
      left:-100%; /* sous-menu A GAUCHE */
    }

    Et pour ajouter les bonnes flèches :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    /* ----------- fleche ----------- */
    li.hasSub:before {
      position: absolute;
      content: "\25bc";
      color: #999;
      bottom: 5px;
      right: 5px;
    }
    li.hasSub:hover:before {
      color: #fff;
    }
    nav > ul > li li.hasSub:before {
      content: "\25BA";
      bottom: 7px;
    }
    nav > ul > li:last-child li.hasSub:before {
      content: "\25C4";
      bottom: 7px;
    }

    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  11. #11
    Membre émérite

    Homme Profil pro
    Webmaster débutant
    Inscrit en
    octobre 2006
    Messages
    6 170
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant
    Secteur : Industrie

    Informations forums :
    Inscription : octobre 2006
    Messages : 6 170
    Points : 2 615
    Points
    2 615
    Billets dans le blog
    1

    Par défaut

    Merci pour ta réponse immédiate. Du coup, j'ai rajouté quelques menus de niveau 3 : https://codepen.io/laurentsc/pen/pdgvMN/

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    <nav id="menu">
      <ul>
        <li class="hasSub"><a href="javascript:void(0)">menu 1</a>
          <ul>
            <li class="hasSub"><a href="javascript:void(0)">menu 1.1</a><ul><li><a href="#">menu 1.1.1</a></li><li><a href="#">menu 1.1.2</a></li></ul></li>
            <li><a href="#">menu 1.2</a></li>
            <li><a href="#">menu 1.3</a></li>
            <li><a href="#">menu 1.4</a></li>
          </ul>
        </li>
        <li class="hasSub"><a href="javascript:void(0)">ceci est le menu 2</a>
          <ul>
            <li><a href="#">menu 2.1</a></li>
            <li class="hasSub"><a href="javascript:void(0)">menu 2.2</a><ul><li><a href="#">menu 2.2.1</a></li><li><a href="#">menu 2.2.2</a></li></ul>
              <li><a href="#">menu 2.2.3</a></li></ul</li>
            <li><a href="#">menu 2.3</a></li>
          </ul>
        </li>
        <li><a href="#">menu 3 sans sous-menu</a></li>
        <li class="hasSub"><a href="javascript:void(0)">enfin, voici un menu 4 un peu plus long</a>
          <ul>
            <li class="hasSub"><a href="javascript:void(0)">menu 4.1</a><ul><li><a href="#">menu 4.1.1</a></li><li><a href="#">menu 4.1.2</a></li></ul></li>
            <li><a href="#">menu 4.2</a></li>
          </ul>
        </li>
      </ul>
    </nav>
     
    <div>
     
        <p>bla bla 1</p>
     
        <p>bla bla 2</p>
    </div>

    css inchangé. Par contre le sous-menu de niveau 3 sous le menu de niveau 2 "4.1" est trop large (même largeur que le niveau 2). Comment réduire sa largeur ?
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

  12. #12
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 397
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 397
    Points : 20 761
    Points
    20 761

    Par défaut

    Fait un effort de LECTURE !

    C'est écrit dans le code CSS.

    Voilà un exemple (pour écran suffisamment large*) :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    /* ----------- MENU ----------- */
    nav {
      position: relative;
    }
    nav ul {
      position: relative;
      margin: 0;
      padding: 0;
      list-style-type: none;
    }
    nav li {
      position: relative;
    }
    nav a {
      position: relative;
      display: block;
    }
    /* ------ MENU niveau 1 ------ */
    nav > ul {
      display: -webkit-flex;
      display: flex;
      -webkit-flex-direction: row;
      flex-direction: row;
    }
    nav > ul > li {
      /*-webkit-flex: 1 1 auto;
      flex: 1 1 auto; *//* menus qui s'adaptent en largeur*/
      -webkit-flex:1 1 25%; flex:1 1 25%; /* 4 menus de meme largeur*/
    }
    /* --- MENU niveau 2 et suivants --- */
    nav > ul ul {
      position: absolute;
      width: 50%;
      top: 100%; /* sous-menu DESSOUS */
      left:0;
      z-index: 999;
      display: none; /* on masque */
      min-width: 120px;
    }
    /* --- MENU niveaux 3 et suivants --- */
    nav > ul ul ul {
      position: absolute;
      width: 100%;
      top: 0;
      left:100%; /* sous-menu A DROITE */
    }
    nav > ul > li:last-child ul { /* dernier li du 1er ul */
      width: 50%;
      top: 100%;
      left:50%;
    }
    nav > ul > li:last-child ul ul { /* dernier li du 1er ul */
      position: absolute;
      width: 100%;
      top: 0;
      left:-100%; /* sous-menu A GAUCHE */
    }
    /* ----------- hover ----------- */
    nav li:hover > ul {
      display: block; /* on affiche */
    }
    nav li:hover {
      background: grey;
    }
    nav li:hover > a {
      color: white;
    }
    /* ----------- DECORATION ----------- */
    nav li {
      background: #ccc;
    }
    nav li li {
      background: #bbb;
    }
    nav a {
      padding: 10px;
      text-decoration: none;
      color: #666;
      font-family: "Arial", sans-serif;
    }
    /* ----------- fleche ----------- */
    li.hasSub:before {
      position: absolute;
      content: "\25bc";
      color: #999;
      bottom: 5px;
      right: 5px;
    }
    li.hasSub:hover:before {
      color: #fff;
    }
    nav > ul > li li.hasSub:before {
      content: "\25BA";
      bottom: 7px;
    }
    nav > ul > li:last-child li.hasSub:before {
      content: "\25C4";
      bottom: 7px;
    }
    * les medias queries permettent d'adapter l'affichage en fonction de la largeur de la fenêtre.
    Mais ça, on le garde pour une autre leçon discussion...

    N.B. Si tu te contentes de COPIER-COLLER mes codes A LA SUITE les uns des autres, tu ne comprendras jamais rien...
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Menu déroulant qui décale le contenu
    Par apt dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 21/05/2011, 20h02
  2. Réponses: 4
    Dernier message: 10/06/2009, 13h12
  3. Sous-menu qui ne s'affiche pas sous Mozilla
    Par philippef dans le forum Mise en page CSS
    Réponses: 6
    Dernier message: 08/08/2008, 20h11
  4. Sous menu qui se referme lors d'un clique
    Par sissi25 dans le forum JavaScript
    Réponses: 1
    Dernier message: 12/06/2008, 21h38
  5. pb sous menu qui reste ouvert quand je déplace la souris
    Par mouna201 dans le forum JavaScript
    Réponses: 9
    Dernier message: 17/02/2007, 15h26

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo