IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Conception Web Discussion :

Mise en place d'une navbar multi level


Sujet :

Conception Web

  1. #21
    Inactif  
    Homme Profil pro
    Webmaster
    Inscrit en
    Juin 2021
    Messages
    645
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 57
    Localisation : France, Pas de Calais (Nord Pas de Calais)

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

    Informations forums :
    Inscription : Juin 2021
    Messages : 645
    Points : 1 280
    Points
    1 280
    Par défaut
    Bonjour,

    Là, tu as DEJA des sous-menus.
    Voir mon message #15 pour les sous-sous-menus...
    Un menu trop complexe est signe de mauvaise organisation.

    Mais bon...
    Ton 1er message montrait un menu, avec un script JS qui, je crois, gérait les sous-sous-menus.

  2. #22
    Membre à l'essai
    Homme Profil pro
    Ac/ssociation
    Inscrit en
    Septembre 2021
    Messages
    39
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Dordogne (Aquitaine)

    Informations professionnelles :
    Activité : Ac/ssociation
    Secteur : Associations - ONG

    Informations forums :
    Inscription : Septembre 2021
    Messages : 39
    Points : 15
    Points
    15
    Par défaut
    Bonsoir,
    Desole je n'ai plus acces au autres message, desole encore, donc suis perdu.
    Bonne soiree

  3. #23
    Inactif  
    Homme Profil pro
    Webmaster
    Inscrit en
    Juin 2021
    Messages
    645
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 57
    Localisation : France, Pas de Calais (Nord Pas de Calais)

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

    Informations forums :
    Inscription : Juin 2021
    Messages : 645
    Points : 1 280
    Points
    1 280
    Par défaut
    LOL...

    1-On est passé sur la 2ème page !
    Clique sur la pagination...

    2- En fait... ce n'est pas le JS, mais le code CSS additionnel qui fait le job... sur :hover.

    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
    ...
    <ul....>  <!-- menu -->
    ...
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown-3" role="button" data-bs-toggle="dropdown" aria-expanded="false">Les races canines</a>
     
            <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <!-- sous-menu -->
     
              <li>
                <a class="dropdown-item" href="#">D'où vient le chien</a>
                <ul class="submenu dropdown-menu"> <!-- sous-sous-menu -->
                  <li><a class="dropdown-item" href="#">Multi level 1</a></li>
                  <li><a class="dropdown-item" href="#">Multi level 2</a></li>
                  <li><a class="dropdown-item" href="#">Multi level 3</a></li>
                </ul>
              </li>
    ...
            </ul>
          </li>
    ...

    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
    @media all and (min-width: 992px) {
      .dropdown-menu li{
        position: relative;}
      .dropdown-menu .submenu{ 
        display: none;
        position: absolute;
        left:100%; top:-7px;}
      .dropdown-menu .submenu-left{ 
        right:100%; left:auto; }
      .dropdown-menu > li:hover{ background-color: #f1f1f1 }
      .dropdown-menu > li:hover > .submenu{
        display: block;
      }}      
    @media (max-width: 1200px) {
      .dropdown-menu .dropdown-menu{ margin-left:0.7rem; margin-right:0.7rem; margin-bottom: .5rem;}}

    IMPORTANT :
    • CE N'EST PAS ERGONOMIQUE !
    • DONC, JE TE LE DECONSEILLE !

    Il serait préférable d'avoir :
    • UN MENU SECONDAIRE dans chaque page
    • OU un module de recherche / filtre

  4. #24
    Membre à l'essai
    Homme Profil pro
    Ac/ssociation
    Inscrit en
    Septembre 2021
    Messages
    39
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Dordogne (Aquitaine)

    Informations professionnelles :
    Activité : Ac/ssociation
    Secteur : Associations - ONG

    Informations forums :
    Inscription : Septembre 2021
    Messages : 39
    Points : 15
    Points
    15
    Par défaut
    Re
    Merci pour ta reponse
    comment cela un menu secondaire?

  5. #25
    Membre à l'essai
    Homme Profil pro
    Ac/ssociation
    Inscrit en
    Septembre 2021
    Messages
    39
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Dordogne (Aquitaine)

    Informations professionnelles :
    Activité : Ac/ssociation
    Secteur : Associations - ONG

    Informations forums :
    Inscription : Septembre 2021
    Messages : 39
    Points : 15
    Points
    15
    Par défaut
    Bonsoir,
    je reprends l'ancien dont tu parlais.
    Mais à la longue je ne comprends plus rien, plus que marre..
    Pourquoi les sous menus ne sont pas tous au même endroit dans le code..
    Bref je n'arrive même plus à mettre un autre onglet..
    Si au moins cela était plus logique, mais on retrouve des sous menus partout, faudrait les regrouper?
    Possible? C'est un peu fouilli.
    Bon voila le dernier...

    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
    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
    <!DOCTYPE HTML>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="keywords" content="htmlcss bootstrap, multi level menu, submenu, treeview nav menu examples" />  
    <!-- chargement des feuilles de style -->
    <style type="text/css">
    @media all and (min-width: 992px) {
    .dropdown-menu li{
                    position: relative;}
            .dropdown-menu .submenu{ 
                    display: none;
                    position: absolute;
                    left:100%; top:-7px;}
            .dropdown-menu .submenu-left{ 
                    right:100%; left:auto; }
    .dropdown-menu > li:hover{ background-color: #f1f1f1 }
            .dropdown-menu > li:hover > .submenu{
                    display: block;
            }}      
    @media (max-width: 1200px) {
    .dropdown-menu .dropdown-menu{ margin-left:0.7rem; margin-right:0.7rem; margin-bottom: .5rem;}} 
    </style>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">	
    <!-- Fin des feuilles de style -->	
    <!-- Debut des scripts -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>	
    <script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function(){
      document.querySelectorAll('.dropdown-menu').forEach(function(element){
                            element.addEventListener('click', function (e) {
                              e.stopPropagation();
                            });})
                    if (window.innerWidth < 992) {
                            document.querySelectorAll('.navbar .dropdown').forEach(function(everydropdown){
                                    everydropdown.addEventListener('hidden.bs.dropdown', function () {
                                              this.querySelectorAll('.submenu').forEach(function(everysubmenu){
                                                    everysubmenu.style.display = 'none';
                                              });})});
    document.querySelectorAll('.dropdown-menu a').forEach(function(element){
                                    element.addEventListener('click', function (e) {
                     let nextEl = this.nextElementSibling;
                                            if(nextEl && nextEl.classList.contains('submenu')) {    
                                                    e.preventDefault();
                                                    console.log(nextEl);
                                                    if(nextEl.style.display == 'block'){
                                                            nextEl.style.display = 'none';
                                                    } else {
                                                            nextEl.style.display = 'block';
                                                    }}});})}}); 
    </script>
    <!-- Fin des scripts -->	
    </head>
    <body>
    <div class="container">
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
     <div class="container-fluid">
     	 <a class="navbar-brand" href="#">Acceuil</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main_nav"  aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      <div class="collapse navbar-collapse" id="main_nav">
    <ul class="navbar-nav">
    <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">aaa</a>
                    <ul class="dropdown-menu">
    				 <li><a class="dropdown-item" href="#"> Dropdown item 1 </a></li>
                      <li><a class="dropdown-item" href="#"> Dropdown item 2 &raquo; </a>
    					<ul class="submenu dropdown-menu">
                          <li><a class="dropdown-item" href="#">Submenu item 1</a></li>
                          <li><a class="dropdown-item" href="#">Submenu item 2</a></li>
                          <li><a class="dropdown-item" href="#">Submenu item 3</a></li>
                        </ul>
                      </li>
                      <li><a class="dropdown-item" href="#"> Dropdown item 3 &raquo; </a>
                        <ul class="submenu dropdown-menu">
                          <li><a class="dropdown-item" href="#">Another submenu 1</a></li>
                          <li><a class="dropdown-item" href="#">Another submenu 2</a></li>
                          <li><a class="dropdown-item" href="#">Another submenu 3</a></li>
                          <li><a class="dropdown-item" href="#">Another submenu 4</a></li>
                        </ul>
                      </li>
                      <li><a class="dropdown-item" href="#"> Dropdown item 4 &raquo;</a>
                        <ul class="submenu dropdown-menu">
                          <li><a class="dropdown-item" href="#">Another submenu 1</a></li>
                          <li><a class="dropdown-item" href="#">Another submenu 2</a></li>
                          <li><a class="dropdown-item" href="#">Another submenu 3</a></li>
                          <li><a class="dropdown-item" href="#">Another submenu 4</a></li>
                        </ul>
                      </li>
                      <li><a class="dropdown-item" href="#"> Dropdown item 5 </a></li>
                      <li><a class="dropdown-item" href="#"> Dropdown item 6 </a></li>
                    <li><a class="dropdown-item" href="#"> Dropdown item 7 </a></li>
    	            <li><a class="dropdown-item" href="#"> Dropdown item 8 </a></li>
    	          </ul>
                  </li>
    	</ul>
     
    </div>
     </div>
    </nav>
    <section class="section-content py-5">
    </section>
    </div>
    </body>
    </html>

    je voudrais juste comprendre l'architecture.
    Bonne soirée

  6. #26
    Inactif  
    Homme Profil pro
    Webmaster
    Inscrit en
    Juin 2021
    Messages
    645
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 57
    Localisation : France, Pas de Calais (Nord Pas de Calais)

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

    Informations forums :
    Inscription : Juin 2021
    Messages : 645
    Points : 1 280
    Points
    1 280
    Par défaut
    Citation Envoyé par SosChiensDordogne Voir le message
    je voudrais juste comprendre l'architecture.
    INDENTE LE CODE !

  7. #27
    Membre à l'essai
    Homme Profil pro
    Ac/ssociation
    Inscrit en
    Septembre 2021
    Messages
    39
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Dordogne (Aquitaine)

    Informations professionnelles :
    Activité : Ac/ssociation
    Secteur : Associations - ONG

    Informations forums :
    Inscription : Septembre 2021
    Messages : 39
    Points : 15
    Points
    15
    Par défaut
    Hello
    Ca y est j'ai trouvé le binz, merci à toi , cela a été difficile,
    J'ai repris tes anciens messages, et hop.
    Autre souci pour élargir la barre, la mettre en blanc avec police noire
    J'ai ça :

    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
    @media> 
    all and (min-width: 992px) {
    .dropdown-menu li{
                    position: relative;}
            .dropdown-menu .submenu{ 
                    display: none;
                    position: absolute;
                    left:100%; top:-7px;}
            .dropdown-menu .submenu-left{ 
                    right:100%; left:auto; }
    .dropdown-menu > li:hover{ background-color: #f1f1f1 }
            .dropdown-menu > li:hover > .submenu{
                    display: block;
            }}      
    @media (max-width: 1200px) {
    .dropdown-menu .dropdown-menu{ margin-left:0.7rem; margin-right:0.7rem; margin-bottom: .5rem;}} 
    </style>

    Ai eu du mal à percuter mais ça y est
    Merci encore
    Bonne soirée

  8. #28
    Membre à l'essai
    Homme Profil pro
    Ac/ssociation
    Inscrit en
    Septembre 2021
    Messages
    39
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Dordogne (Aquitaine)

    Informations professionnelles :
    Activité : Ac/ssociation
    Secteur : Associations - ONG

    Informations forums :
    Inscription : Septembre 2021
    Messages : 39
    Points : 15
    Points
    15
    Par défaut
    Bonsoir,
    J'ai trouve cela.
    Serait-il possible d'élargir la fenêtre de ce premier onglet pour avoir 2 colonnes plus large, afin d'avoir 2 phrases comme "La responsabilité du propriétaire d’un chien" cote a cote?.
    Serait-il possible de le transformer en responsive..

    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
    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
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Menu HTML / Javascript : Aperçu</title>
    <!-- nettuts -->
    <!-- traduit et adapté par outils-web.com -->
    <!-- chargement des feuilles de style -->
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
    </head>
     
    <body>
    <ul id="menu">
    	<li><a href="#" class="drop">Accueil</a><!-- Accueil -->
    		<div class="dropdown_2columns"><!-- 2 col de base-->
    			<div class="col_2"><!-- 2 col -->
                    <h2>Bienvenue !</h2>
                </div>
    			<div class="col_2">
    				<p>Voici un éventail des possibilités de Mega Drop Down Menu.</p>             
    				<p>Curabitur euismod gravida ante nec commodo. Nunc dolor nulla, semper in ultricies vitae, vulputate porttitor neque.</p>             
                </div>
                <div class="col_2">
                    <h2>Navigateurs</h2>
                </div>
    			<!-- 2 col : 1 + 1  etc...-->
                <div class="col_1">
                    <img src="css/images/browsers.png" width="125" height="48" alt="" />
                </div>
    			<div class="col_1">
                    <p>Test réussi pour tous les navigateurs</p>
    			</div>
    		</div><!-- fin 2 col -->
        </li><!-- fin accueil -->
     
     
        <li><a href="#" class="drop">Votre chien et vous</a><!-- 4 colonnes -->
    		<div class="dropdown_4columns"><!-- 4 col -->
    			<div class="col_4">
                    <h2>Votre chien et vous</h2>
                </div> 
    			<div class="col_1">
    				<h3>Liens</h3>
                    <ul>
                        <li><a href="#">Droits de l'animal et devoirs de l’homme</a></li>
                        <li><a href="#">La responsabilité du propriétaire d’un chien</a></li>
                        <li><a href="#">Scripts</a></li>
                        <li><a href="#">Liens</a></li>
    					<li><a href="#">Contact</a></li>
                    </ul>
    			</div>
    		</div><!-- fin  4 colonnes -->
    	</li>
    	    <li><a href="#" class="drop">aaaaa</a><!-- 4 colonnes -->
    		<div class="dropdown_4columns"><!-- 4 col -->
    			<div class="col_4">
                    <h2>Titre</h2>
                </div>
    			<div class="col_1">
    				<h3>Liens</h3>
                    <ul>
                        <li><a href="#">Lightbox</a></li>
                        <li><a href="#">Diaporamas</a></li>
                        <li><a href="#">Scripts</a></li>
                        <li><a href="#">Liens</a></li>
    					<li><a href="#">Contact</a></li>
                    </ul>
    			</div>
    			<div class="col_1">
    				<h3>Liens</h3>
                    <ul>
                        <li><a href="#">Lightbox</a></li>
                        <li><a href="#">Diaporamas</a></li>
                        <li><a href="#">Scripts</a></li>
                        <li><a href="#">Liens</a></li>
    					<li><a href="#">Contact</a></li>
                    </ul>
    			</div>
    			<div class="col_1">
    				<h3>Liens</h3>
                    <ul>
                        <li><a href="#">Lightbox</a></li>
                        <li><a href="#">Diaporamas</a></li>
                        <li><a href="#">Scripts</a></li>
                        <li><a href="#">Liens</a></li>
    					<li><a href="#">Contact</a></li>
                    </ul>
    			</div>
    			<div class="col_1">
    				<h3>Liens</h3>
                    <ul>
                        <li><a href="#">Lightbox</a></li>
                        <li><a href="#">Diaporamas</a></li>
                        <li><a href="#">Scripts</a></li>
                        <li><a href="#">Liens</a></li>
    					<li><a href="#">Contact</a></li>
                    </ul>
    			</div>
    		</div><!-- fin  4 colonnes -->
    	</li>
    	<!-- fin 4 col -->
    	<li class="menu_right"><a href="#" class="drop">Classique</a><!-- classique -->
    		<div class="dropdown_1column align_right">
    				<div class="col_1">
    					<ul class="simple">
    				    <li><a href="#">Lightbox</a></li>
                        <li><a href="#">Diaporamas</a></li>
                        <li><a href="#">Scripts</a></li>
                        <li><a href="#">Liens</a></li>
    					<li><a href="#">Contact</a></li>
                        </ul>
    				</div>
    		</div>
    	</li>
    	<!-- notez le positionnement de ce menu -->
    	<li class="menu_right"><a href="#" class="drop">3 columns</a><!-- 3 colonnes -->
    		<div class="dropdown_3columns align_right"><!-- 3 col -->
    			<div class="col_3">
                    <h2>Listes internes</h2>
                </div>
    			<div class="col_1">
    				<ul class="greybox">
    				    <li><a href="#">Lightbox</a></li>
                        <li><a href="#">Diaporamas</a></li>
                        <li><a href="#">Scripts</a></li>
                        <li><a href="#">Liens</a></li>
    					<li><a href="#">Contact</a></li>
    				</ul>
    			</div>
    			<div class="col_1">
    				<ul class="greybox">
    				    <li><a href="#">Lightbox</a></li>
                        <li><a href="#">Diaporamas</a></li>
                        <li><a href="#">Scripts</a></li>
                        <li><a href="#">Liens</a></li>
    					<li><a href="#">Contact</a></li>
                    </ul>
    			</div>
                <div class="col_1">
    			   <ul class="greybox">
    			       	<li><a href="#">Lightbox</a></li>
                        <li><a href="#">Diaporamas</a></li>
                        <li><a href="#">Scripts</a></li>
                        <li><a href="#">Liens</a></li>
    					<li><a href="#">Contact</a></li>
    			   </ul>
                </div>
    			<div class="col_3">
                    <h2>Exemples d'images</h2>
                </div>
    			<div class="col_3">
    				<img src="css/images/02.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
                    <p>Maecenas eget eros lorem, nec pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Maecenas imperdiet, nibh vitae rutrum vulputate, lorem sem condimentum.<a href="#">Read more...</a></p>
     
                    <img src="css/images/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
                    <p>Aliquam elementum felis quis felis consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi. Aliquam pretium mollis fringilla. Vestibulum tempor facilisis malesuada. <a href="#">Read more...</a></p>
                </div>
     
            </div><!-- fin 3 colonnes -->
        </li><!-- fin 3 col -->
    </ul>
     
    </body>
    </html>

    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
    126
    127
    body, ul, li {font-size:14px; font-family:Arial, Helvetica, sans-serif;line-height:21px;text-align:left;}
     
    #menu {list-style:none;width:940px;margin:30px auto 0px auto;height:43px;padding:0px 20px 0px 20px;
    	/* Rounded Corners */
    	-moz-border-radius: 10px;
    	-webkit-border-radius: 10px;
    	border-radius: 10px;
     
    	/* Background color and gradients */
    	background: #014464;
    	background: -moz-linear-gradient(top, #0272a7, #013953);
    	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));
     
    	/* Borders */
    	border: 1px solid #002232;
    	-moz-box-shadow:inset 0px 0px 1px #edf9ff;
    	-webkit-box-shadow:inset 0px 0px 1px #edf9ff;
    	box-shadow:inset 0px 0px 1px #edf9ff;
    }
     
    #menu li {float:left;display:block;text-align:center;position:relative;padding: 4px 10px 4px 10px;margin-right:30px;margin-top:7px;border:none;}
    #menu li:hover {border: 1px solid #777777;padding: 4px 9px 4px 9px;	
    	/* Background color and gradients */
    	background: #F4F4F4;
    	background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
    	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
     
    	/* Rounded corners */
    	-moz-border-radius: 5px 5px 0px 0px;
    	-webkit-border-radius: 5px 5px 0px 0px;
    	border-radius: 5px 5px 0px 0px;
    }
     
    #menu li a {font-family:Arial, Helvetica, sans-serif;font-size:14px; color: #EEEEEE;display:block;outline:0;text-decoration:none;text-shadow: 1px 1px 1px #000;}
    #menu li:hover a {color:#161616;text-shadow: 1px 1px 1px #ffffff;}
    #menu li .drop {padding-right:21px;background:url("images/drop.png") no-repeat right 8px;}
    #menu li:hover .drop {background:url("images/drop.png") no-repeat right 7px;}
     
    .dropdown_1column, 
    .dropdown_2columns, 
    .dropdown_3columns, 
    .dropdown_4columns,
    .dropdown_5columns {margin:4px auto;float:left;position:absolute;left:-999em; /* Hides the drop down */text-align:left;padding:10px 5px 10px 5px;border:1px solid #777777;border-top:none;
    	/* Gradient background */
    	background:#F4F4F4;
    	background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
    	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));
     
    	/* Rounded Corners */
    	-moz-border-radius: 0px 5px 5px 5px;
    	-webkit-border-radius: 0px 5px 5px 5px;
    	border-radius: 0px 5px 5px 5px;
    }
     
    .dropdown_1column {width: 140px;}
    .dropdown_2columns {width: 280px;}
    .dropdown_3columns {width: 420px;}
    .dropdown_4columns {width: 560px;}
    .dropdown_5columns {width: 700px;}
     
    #menu li:hover .dropdown_1column, 
    #menu li:hover .dropdown_2columns, 
    #menu li:hover .dropdown_3columns,
    #menu li:hover .dropdown_4columns,
    #menu li:hover .dropdown_5columns {left:-1px;top:auto;}
     
    .col_1,
    .col_2,
    .col_3,
    .col_4,
    .col_5 {display:inline;float: left;position: relative;margin-left: 5px;margin-right: 5px;}
    .col_1 {width:130px;}
    .col_2 {width:270px;}
    .col_3 {width:410px;}
    .col_4 {width:550px;}
    .col_5 {width:690px;}
     
    #menu .menu_right {float:right;margin-right:0px;}
    #menu li .align_right {
    	/* Rounded Corners */
    	-moz-border-radius: 5px 0px 5px 5px;
        -webkit-border-radius: 5px 0px 5px 5px;
        border-radius: 5px 0px 5px 5px;
    }
    #menu li:hover .align_right {left:auto;right:-1px;top:auto;}
    #menu p, #menu h2, #menu h3, #menu ul li {font-family:Arial, Helvetica, sans-serif;line-height:21px;font-size:12px;text-align:left;text-shadow: 1px 1px 1px #FFFFFF;}
    #menu h2 {font-size:21px;font-weight:400;letter-spacing:-1px;margin:7px 0 14px 0;padding-bottom:14px;border-bottom:1px solid #666666;}
    #menu h3 {font-size:14px;margin:7px 0 14px 0;padding-bottom:7px;border-bottom:1px solid #888888;}
    #menu p {line-height:18px;margin:0 0 10px 0;}
    #menu li:hover div a {font-size:12px;color:#015b86;}
    #menu li:hover div a:hover {color:#029feb;}
    .strong {font-weight:bold;}
    .italic {font-style:italic;}
    .imgshadow { /* Better style on light background */
    	background:#FFFFFF;
    	padding:4px;
    	border:1px solid #777777;
    	margin-top:5px;
    	-moz-box-shadow:0px 0px 5px #666666;
    	-webkit-box-shadow:0px 0px 5px #666666;
    	box-shadow:0px 0px 5px #666666;
    }
    .img_left { /* Image sticks to the left */	width:auto;	float:left;	margin:5px 15px 5px 5px;}
     
    #menu li .black_box {	background-color:#333333;	color: #eeeeee;	text-shadow: 1px 1px 1px #000;	padding:4px 6px 4px 6px;
    	/* Rounded Corners */
    	-moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
     
    	/* Shadow */
    	-webkit-box-shadow:inset 0 0 3px #000000;
    	-moz-box-shadow:inset 0 0 3px #000000;
    	box-shadow:inset 0 0 3px #000000;
    }
     
    #menu li ul {list-style:none;padding:0;margin:0 0 12px 0;}
    #menu li ul li {font-size:12px;	line-height:24px;position:relative;	text-shadow: 1px 1px 1px #ffffff;padding:0;margin:0;float:none;	text-align:left;width:130px;}
    #menu li ul li:hover {background:none;border:none;padding:0;margin:0;}
    #menu li .greybox li {background:#F4F4F4;border:1px solid #bbbbbb;margin:0px 0px 4px 0px;padding:4px 6px 4px 6px;width:116px;
    	/* Rounded Corners */
    	-moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        -khtml-border-radius: 5px;
        border-radius: 5px;
    }
    #menu li .greybox li:hover {background:#ffffff;border:1px solid #aaaaaa;padding:4px 6px 4px 6px;margin:0px 0px 4px 0px;}

    Pour info, l'autre header fonctionne

    Merci d'avance
    Bonne soirée

  9. #29
    Membre à l'essai
    Homme Profil pro
    Ac/ssociation
    Inscrit en
    Septembre 2021
    Messages
    39
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Dordogne (Aquitaine)

    Informations professionnelles :
    Activité : Ac/ssociation
    Secteur : Associations - ONG

    Informations forums :
    Inscription : Septembre 2021
    Messages : 39
    Points : 15
    Points
    15
    Par défaut
    Rebonsoir,

    maintenant que la barre est definie, j'aimerais inclure une barre de recherche a droite, troquer cette couleur bleue pour une blanche, avec texte en noir et l'allonger, mais je ne vois pas comment faire.
    Regarde pour l'ergonomie, comme tu t'y entends plus que moi.

    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
    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
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    276
    277
    278
    279
    280
    281
    282
    283
    284
    285
    286
    287
    288
    289
    290
    291
    292
    293
    294
    295
    296
    297
    298
    299
    300
    301
    302
    303
    304
    305
    306
    307
    308
    309
    310
    311
    312
    313
    314
    315
    316
    317
    318
    319
    320
    321
    322
    323
    324
    325
    326
    327
    328
    329
    330
    331
    332
    333
    334
    335
    336
    <!DOCTYPE HTML>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="keywords" content="htmlcss bootstrap, multi level menu, submenu, treeview nav menu examples" />  
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <!-- chargement des feuilles de style -->
    <style type="text/css">
    @media all and (min-width: 992px) {
    .dropdown-menu li{
                    position: relative;}
            .dropdown-menu .submenu{ 
                    display: none;
                    position: absolute;
                    left:100%; top:-7px;}
            .dropdown-menu .submenu-left{ 
                    right:100%; left:auto; }
    .dropdown-menu > li:hover{ background-color: #f1f1f1 }
            .dropdown-menu > li:hover > .submenu{
                    display: block;
            }}      
    @media (max-width: 1200px) {
    .dropdown-menu .dropdown-menu{ margin-left:0.7rem; margin-right:0.7rem; margin-bottom: .5rem;}} 
    </style>
    <!-- Fin des feuilles de style -->	
    <!-- Debut des scripts -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>	
    <script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function(){
      document.querySelectorAll('.dropdown-menu').forEach(function(element){
                            element.addEventListener('click', function (e) {
                              e.stopPropagation();
                            });})
                    if (window.innerWidth < 992) {
                            document.querySelectorAll('.navbar .dropdown').forEach(function(everydropdown){
                                    everydropdown.addEventListener('hidden.bs.dropdown', function () {
                                              this.querySelectorAll('.submenu').forEach(function(everysubmenu){
                                                    everysubmenu.style.display = 'none';
                                              });})});
    document.querySelectorAll('.dropdown-menu a').forEach(function(element){
                                    element.addEventListener('click', function (e) {
                     let nextEl = this.nextElementSibling;
                                            if(nextEl && nextEl.classList.contains('submenu')) {    
                                                    e.preventDefault();
                                                    console.log(nextEl);
                                                    if(nextEl.style.display == 'block'){
                                                            nextEl.style.display = 'none';
                                                    } else {
                                                            nextEl.style.display = 'block';
                                                    }}});})}}); 
    </script>
    <!-- Fin des scripts -->	
    </head>
    <body>
    <div class="container">
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
     <div class="container-fluid">
     	 <a class="navbar-brand" href="#">Acceuil</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main_nav"  aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      <div class="collapse navbar-collapse" id="main_nav">
    <ul class="navbar-nav">
    <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Les races canines</a>
                    <ul class="dropdown-menu">
    				 <li><a class="dropdown-item" href="#">Rechercher une race</a></li>
                      <li><a class="dropdown-item" href="#">D'où vient le chien</a>
                      </li>
                      <li><a class="dropdown-item" href="#">Les documents de votre chien&raquo;</a>
                        <ul class="submenu dropdown-menu">
                          <li><a class="dropdown-item" href="#">Les documents généalogiques</a></li>
                          <li><a class="dropdown-item" href="#">La carte d'identification</a></li>
                          <li><a class="dropdown-item" href="#">Le passeport européen</a></li>
                        </ul></li>
                      <li><a class="dropdown-item" href="#">La confirmation&raquo;</a>
                        <ul class="submenu dropdown-menu">
                          <li><a class="dropdown-item" href="#">L'examen de confirmation</a></li>
                        </ul></li>
                      <li><a class="dropdown-item" href="#">Groupes et catégories</a></li>
                      <li><a class="dropdown-item" href="#">Le chien de race</a></li>
                    <li><a class="dropdown-item" href="#">Les races canines françaises</a></li>
    	          </ul></li></ul>
                     <ul class="navbar-nav">
                     <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Votre chien et vous</a>
                    <ul class="dropdown-menu">
    				 <li><a class="dropdown-item" href="#">Droits de l'animal et devoirs de l’homme</a></li>
                      <li><a class="dropdown-item" href="#">L'adoption&raquo;</a>
    					<ul class="submenu dropdown-menu">
                          <li><a class="dropdown-item" href="#">L'adoption d'un chiot</a></li>
                          <li><a class="dropdown-item" href="#">Adopter un chien adulte</a></li>
                          <li><a class="dropdown-item" href="#">L'arrivée d'un deuxième chien</a></li>
                        </ul></li>
                      <li><a class="dropdown-item" href="#">La cohabitation&raquo;</a>
                        <ul class="submenu dropdown-menu">
                          <li><a class="dropdown-item" href="#">Quand petit et grand chiens cohabitent</a></li>
                          <li><a class="dropdown-item" href="#">La cohabitation de mon chien avec d'autres espèces</a></li>
                          <li><a class="dropdown-item" href="#">Bébé arrive, comment gérer ?</a></li>
                          <li><a class="dropdown-item" href="#">Chien en location, impossible de vous l’interdire</a></li>
    					  <li><a class="dropdown-item" href="#">Jamais sans mon chien</a></li>
    					  </ul></li>
                         <li><a class="dropdown-item" href="#"><li><a class="dropdown-item" href="#">La responsabilité du propriétaire d’un chien</a></li></a></li>
                      <li><a class="dropdown-item" href="#">Responsabilités légales des maîtres</a></li>
                    <li><a class="dropdown-item" href="#">Quand on s’attache ou pas</a></li>
    	            <li><a class="dropdown-item" href="#">Dormir avec son animal</a></li>
    				<li><a class="dropdown-item" href="#">Les chiens distinguent les mots</a></li>
    				<li><a class="dropdown-item" href="#">Les jeux des chiens</a></li>
    	          </ul></li></ul>	  
                  <ul class="navbar-nav">
                  <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Mon chien</a>
                    <ul class="dropdown-menu">
    				 <li><a class="dropdown-item" href="#">Les 10 commandements du bon maitre</a></li>
                      <li><a class="dropdown-item" href="#">Mon chien...&raquo;</a>
    					<ul class="submenu dropdown-menu">
                          <li><a class="dropdown-item" href="#">fugue</a></li>
                          <li><a class="dropdown-item" href="#">n'est pas propre</a></li>
                          <li><a class="dropdown-item" href="#">ne m’écoute plus quand il croise un autre chien</a></li>
    					<li><a class="dropdown-item" href="#">est-il dominant</a></li>	
                        <li><a class="dropdown-item" href="#">se comporte comme un chiot</a></li>
                          <li><a class="dropdown-item" href="#">ne revient pas quand je l'appelle</a></li>
                          <li><a class="dropdown-item" href="#">s’arrête sans cesse pour renifler</a></li>
                          <li><a class="dropdown-item" href="#">ne pense qu'à lui</a></li>
    					  <li><a class="dropdown-item" href="#">mange n'importe quoi</a></li>
                          <li><a class="dropdown-item" href="#">mange mal</a></li>
                          <li><a class="dropdown-item" href="#">me parle</a></li>
                          <li><a class="dropdown-item" href="#">casse tout à la maison</a></li>
                        </ul></li></ul></li></ul>	  
    	               <ul class="navbar-nav">
                  <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Education/Comportement</a>
                    <ul class="dropdown-menu">
    				 <li><a class="dropdown-item" href="#">Psychologie canine et idées reçues</a></li>
    					<li><a class="dropdown-item" href="#">Comportement&raquo;</a>
    					<ul class="submenu dropdown-menu">
                          <li><a class="dropdown-item" href="#">La peur de la rue</a></li>
                          <li><a class="dropdown-item" href="#">Le chien parfait</a></li>
                          <li><a class="dropdown-item" href="#">Le chien médiateur</a></li>
                          <li><a class="dropdown-item" href="#">Le chien peureux</a></li>
    					  <li><a class="dropdown-item" href="#">Le chien phobique</a></li>
    					  <li><a class="dropdown-item" href="#">Le stress chez le chien</a></li>
    					  <li><a class="dropdown-item" href="#">Sevrage précoce et trouble du comportement</a></li>
                        </ul></li>
                      <li><a class="dropdown-item" href="#">Education&raquo;</a>
                        <ul class="submenu dropdown-menu">
                          <li><a class="dropdown-item" href="#">Instinct social et apprentissage des chiens</a></li>
                          <li><a class="dropdown-item" href="#">Pour qu'il devienne un chien bien dans sa peau</a></li>
                        </ul></li>
                      <li><a class="dropdown-item" href="#">Age et apprentissage&raquo;</a>
                        <ul class="submenu dropdown-menu">
                          <li><a class="dropdown-item" href="#">Lui apprendre la solitude</a></li>
                          <li><a class="dropdown-item" href="#">L’apprentissage de la propreté chez le chiot</a></li>
                          <li><a class="dropdown-item" href="#">Le chiot construit sa personnalité</a></li>
                          <li><a class="dropdown-item" href="#">L'école du chiot</a></li>
                        </ul></li>
                      <li><a class="dropdown-item" href="#">Psychologie canine et idées reçues</a></li>
                      <li><a class="dropdown-item" href="#">Développement comportemental du chiot en 4 étapes</a></li>
                    <li><a class="dropdown-item" href="#">L'école du chiot</a></li>
    	            <li><a class="dropdown-item" href="#">Instinct social et apprentissage des chiens</a></li>
    	          <li><a class="dropdown-item" href="#">Les chiens n’ont-ils qu’un seul maître</a></li>
    	          </ul></li></ul>
    	 	               <ul class="navbar-nav">
                  <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Alimentation</a>
                    <ul class="dropdown-menu">
    				 <li><a class="dropdown-item" href="#">Petit récapitulatif sur l'alimentation du chien</a></li>
                      <li><a class="dropdown-item" href="#">En detail&raquo;</a>
    					<ul class="submenu dropdown-menu">
                          <li><a class="dropdown-item" href="#">Le format de la gamelle et quantité distribuée</a></li>
                          <li><a class="dropdown-item" href="#">La meilleure façon de nourrir votre chien</a></li>
                          <li><a class="dropdown-item" href="#">Alimentation ménagère du chien</a></li>
                        <li><a class="dropdown-item" href="#">Mode d'emploi de la ration mixte du chien</a></li>
                          <li><a class="dropdown-item" href="#">Mon chien peut-il manger chaud</a></li>
                          <li><a class="dropdown-item" href="#">Compléments alimentaires</a></li>
    					  <li><a class="dropdown-item" href="#">Les aliments diététiques pour chien</a></li>
                          <li><a class="dropdown-item" href="#">Friandises pour chiens</a></li>
                          <li><a class="dropdown-item" href="#">Que doit comporter une étiquette de croquettes</a></li>
                          <li><a class="dropdown-item" href="#">La supplémentation dans l'alimentation du chien</a></li>
                        <li><a class="dropdown-item" href="#">L'Alimentation du chien de sport</a></li>
                          <li><a class="dropdown-item" href="#">L'alimentation du chien de chasse</a></li>
                          <li><a class="dropdown-item" href="#">Bien nourrir nos meutes de chiens courants</a></li>
    						<li><a class="dropdown-item" href="#">L'alimentation du chien difficile</a></li>
                          <li><a class="dropdown-item" href="#">L'alimentation du chien en surpoids</a></li>
                          <li><a class="dropdown-item" href="#">Le chien "Gros Mangeur"</a></li>
                          <li><a class="dropdown-item" href="#">Conserver les aliments de nos chiens</a></li>
                        <li><a class="dropdown-item" href="#">La ration de nourriture quand il fait froid</a></li>
                          <li><a class="dropdown-item" href="#">Les troubles digestifs chez le chien</a></li>
    						<li><a class="dropdown-item" href="#">Recette de biscuits pour chien</a></li>
                        </ul></li>
                      <li><a class="dropdown-item" href="#">Ce qu'il faut éviter&raquo;</a>
                        <ul class="submenu dropdown-menu">
                          <li><a class="dropdown-item" href="#">Les aliments dangereux pour le chien</a></li>
                          <li><a class="dropdown-item" href="#">Les aliments que nos chiens doivent éviter</a></li>
                          <li><a class="dropdown-item" href="#">Les erreurs alimentaires classiques</a></li>
                        </ul></li>
                      <li><a class="dropdown-item" href="#">Les règles de base&raquo;</a>
                        <ul class="submenu dropdown-menu">
                            <li><a class="dropdown-item" href="#">Les besoins alimentaires du chien</a></li>
                          <li><a class="dropdown-item" href="#">La transition alimentaire du chien</a></li>
                          <li><a class="dropdown-item" href="#">Alimentation, croissance et santé</a></li>
                          <li><a class="dropdown-item" href="#">Les besoins nutritionnels du chien</a></li>
                        <li><a class="dropdown-item" href="#">La saveur des aliments</a></li>
                          <li><a class="dropdown-item" href="#">Rôle des nutriments</a></li>
    						<li><a class="dropdown-item" href="#">Rôle des acides gras</a></li>
                          <li><a class="dropdown-item" href="#">Allergie alimentaire</a></li>
                          <li><a class="dropdown-item" href="#">Changer de marque sans grève de la faim</a></li>
                          <li><a class="dropdown-item" href="#">Dilatation torsion d'estomac</a></li>
                        <li><a class="dropdown-item" href="#">Obésité, une influence génétique complexe</a></li>
                          <li><a class="dropdown-item" href="#">Les besoins en eau d'un chien</a></li>
    						<li><a class="dropdown-item" href="#">L'alimentation de votre chien</a></li>
                        </ul></li></ul></li></ul>
    	           <ul class="navbar-nav">
                  <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Santé et bien-être</a>
                    <ul class="dropdown-menu">
    				 <li><a class="dropdown-item" href="#">Guide des bonnes pratiques</a></li>
                      <li><a class="dropdown-item" href="#">Suivi de santé : Dépistage affections&raquo;</a>
    					<ul class="submenu dropdown-menu">
                          <li><a class="dropdown-item" href="#">L'offre génomiquede la SCC</a></li>
                          <li><a class="dropdown-item" href="#">Le dépistage des tares oculaires</a></li>
                          <li><a class="dropdown-item" href="#">Maladies héréditaires</a></li>
                        </ul></li>
                      <li><a class="dropdown-item" href="#">Maladies héréditaires&raquo;</a>
                        <ul class="submenu dropdown-menu">
                          <li><a class="dropdown-item" href="#">L'anomalie de l'oeil du Colley</a></li>
                          <li><a class="dropdown-item" href="#">La Dysplasie de la rétine</a></li>
                          <li><a class="dropdown-item" href="#">La Cardiomyopathie dilatée</a></li>
                          <li><a class="dropdown-item" href="#">La cataracte</a></li>
                          <li><a class="dropdown-item" href="#">La cécité nocturne</a></li>
    					  </ul></li>
                      <li><a class="dropdown-item" href="#">Autres affections de votre chien&raquo;</a>
                        <ul class="submenu dropdown-menu">
                          <li><a class="dropdown-item" href="#">L'Acidurie</a></li>
                          <li><a class="dropdown-item" href="#">L'Adénite sébacée</a></li>
                          <li><a class="dropdown-item" href="#">Les anomalies vertébrales</a></li>
                          <li><a class="dropdown-item" href="#">Arthrose et activité physique</a></li>
                        <li><a class="dropdown-item" href="#">Les boiteries</a></li>
                          <li><a class="dropdown-item" href="#">Le cancer de la peau</a></li>
                          <li><a class="dropdown-item" href="#">Le cancer de la langue</a></li>
                          <li><a class="dropdown-item" href="#">Les chenilles processionnaires</a></li>
    					  <li><a class="dropdown-item" href="#">Dépigmentation de la truffe</a></li>
                          <li><a class="dropdown-item" href="#">Comment gérer son diabète</a></li>
                          <li><a class="dropdown-item" href="#">Prostate et hyperplasie bénigne (HBP)</a></li>
    					  </ul></li>
    					<li><a class="dropdown-item" href="#">Service ADN&raquo;</a>
                        <ul class="submenu dropdown-menu">
                          <li><a class="dropdown-item" href="#">Les tests génomiques</a></li>
                          <li><a class="dropdown-item" href="#">L'offre génomique de la SCC</a></li>
                          <li><a class="dropdown-item" href="#">Du nouveau dans les tests</a></li>
                          <li><a class="dropdown-item" href="#">ADN, Identification et filiation</a></li>
                        <li><a class="dropdown-item" href="#">Tests, Petits rappels</a></li>
                          <li><a class="dropdown-item" href="#">Tests, Les bonnes questions</a></li>
                          <li><a class="dropdown-item" href="#">Tests, Test de santé ou Test confort</a></li>
    						<li><a class="dropdown-item" href="#">Quels tests de confort pour mon chien</a></li>
                        <li><a class="dropdown-item" href="#">Identification Génétique</a></li>
                          <li><a class="dropdown-item" href="#">Identification, les cas particuliers</a></li>
                          <li><a class="dropdown-item" href="#">Formulaires de commande</a></li>
    						 <li><a class="dropdown-item" href="#">Le stand ADN dans les expositions</a></li>
    						</ul></li>
                      <li><a class="dropdown-item" href="#">Le syndrome brachycéphale et le BREATH</a></li>
                      <li><a class="dropdown-item" href="#">Lexique des abréviations santé</a></li>
                    <li><a class="dropdown-item" href="#">Vaccination</a></li>
    	            <li><a class="dropdown-item" href="#">La Dysplasie du coude</a></li>
    	          <li><a class="dropdown-item" href="#">La beauté du poil</a></li>
    				<li><a class="dropdown-item" href="#">Vétérinaires</a></li>	
    				  </ul></li></ul>
    	 	           <ul class="navbar-nav">
                  <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Nos amis</a>
                    <ul class="dropdown-menu">
    				 <li><a class="dropdown-item" href="#"> Dropdown item 1 </a></li>
                      <li><a class="dropdown-item" href="#">Perdus ou trouvés&raquo;</a>
    					<ul class="submenu dropdown-menu">
                          <li><a class="dropdown-item" href="#">Chiens perdus</a></li>
                          <li><a class="dropdown-item" href="#">Chiens trouvés</a></li>
                          <li><a class="dropdown-item" href="#">Submenu item 3</a></li>
                        </ul></li>
                      <li><a class="dropdown-item" href="#"> Dropdown item 3 &raquo; </a>
                        <ul class="submenu dropdown-menu">
                          <li><a class="dropdown-item" href="#">Another submenu 1</a></li>
                          <li><a class="dropdown-item" href="#">Another submenu 2</a></li>
                          <li><a class="dropdown-item" href="#">Another submenu 3</a></li>
                          <li><a class="dropdown-item" href="#">Another submenu 4</a></li>
                        </ul></li>
                      <li><a class="dropdown-item" href="#"> Dropdown item 4 &raquo;</a>
                        <ul class="submenu dropdown-menu">
                          <li><a class="dropdown-item" href="#">Another submenu 1</a></li>
                          <li><a class="dropdown-item" href="#">Another submenu 2</a></li>
                          <li><a class="dropdown-item" href="#">Another submenu 3</a></li>
                          <li><a class="dropdown-item" href="#">Another submenu 4</a></li>
                        </ul></li>
                      <li><a class="dropdown-item" href="#"> Dropdown item 5 </a></li>
                      <li><a class="dropdown-item" href="#"> Dropdown item 6 </a></li>
                    <li><a class="dropdown-item" href="#"> Dropdown item 7 </a></li>
    	            <li><a class="dropdown-item" href="#"> Dropdown item 8 </a></li>
    	          </ul></li></ul>
    	 	 	           <ul class="navbar-nav">
                  <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Partenariat</a>
                    <ul class="dropdown-menu">
    				 <li><a class="dropdown-item" href="#"> Dropdown item 1 </a></li>
                      <li><a class="dropdown-item" href="#">Perdus ou trouvés&raquo;</a>
    					<ul class="submenu dropdown-menu">
                          <li><a class="dropdown-item" href="#">Chiens perdus</a></li>
                          <li><a class="dropdown-item" href="#">Chiens trouvés</a></li>
                          <li><a class="dropdown-item" href="#">Submenu item 3</a></li>
                        </ul></li>
                      <li><a class="dropdown-item" href="#"> Dropdown item 3 &raquo; </a>
                        <ul class="submenu dropdown-menu">
                          <li><a class="dropdown-item" href="#">Another submenu 1</a></li>
                          <li><a class="dropdown-item" href="#">Another submenu 2</a></li>
                          <li><a class="dropdown-item" href="#">Another submenu 3</a></li>
                          <li><a class="dropdown-item" href="#">Another submenu 4</a></li>
                        </ul></li>
                      <li><a class="dropdown-item" href="#"> Dropdown item 4 &raquo;</a>
                        <ul class="submenu dropdown-menu">
                          <li><a class="dropdown-item" href="#">Another submenu 1</a></li>
                          <li><a class="dropdown-item" href="#">Another submenu 2</a></li>
                          <li><a class="dropdown-item" href="#">Another submenu 3</a></li>
                          <li><a class="dropdown-item" href="#">Another submenu 4</a></li>
                        </ul></li>
                      <li><a class="dropdown-item" href="#"> Dropdown item 5 </a></li>
                      <li><a class="dropdown-item" href="#"> Dropdown item 6 </a></li>
                    <li><a class="dropdown-item" href="#"> Dropdown item 7 </a></li>
    	            <li><a class="dropdown-item" href="#"> Dropdown item 8 </a></li>
    	          </ul></li></ul>
    	 </div>
     </div>
    </nav>
    <section class="section-content py-5">
    </section>
    </div>
    </body>
    </html>
    j'attends ton verdict et merci a toi si j'en suis arrive la.
    Bonne soiree

  10. #30
    Membre à l'essai
    Homme Profil pro
    Ac/ssociation
    Inscrit en
    Septembre 2021
    Messages
    39
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Dordogne (Aquitaine)

    Informations professionnelles :
    Activité : Ac/ssociation
    Secteur : Associations - ONG

    Informations forums :
    Inscription : Septembre 2021
    Messages : 39
    Points : 15
    Points
    15
    Par défaut
    Bonjour,
    est il possible d'avoir un megamenu sous chaque onglet.
    Je n'arrive a en mettre 3 et encore 2 decales a droite

    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
    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
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    <!DOCTYPE HTML>
    <html lang="en">
    <head>
    	<meta charset="utf-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    	<meta name="keywords" content="html, css bootstrap, mega menu, navbar, large dropdown, menu CSS examples" />
    	<meta name="description" content="Bootstrap 5 navbar megamenu examples with simple css demo code" /> 
     
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
    	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"crossorigin="anonymous"></script>
     
    <style type="text/css">
    .navbar .megamenu{ padding: 1rem; }
    /* ============ desktop view ============ */
    @media all and (min-width: 992px) {
            
            .navbar .has-megamenu{position:static!important;}
            .navbar .megamenu{left:0; right:0; width:100%; margin-top:0;  }
            
    }       
    /* ============ desktop view .end// ============ */
     
     
    /* ============ mobile view ============ */
    @media(max-width: 991px){
            .navbar.fixed-top .navbar-collapse, .navbar.sticky-top .navbar-collapse{
                    overflow-y: auto;
                max-height: 90vh;
                margin-top:10px;
            }
    }
    /* ============ mobile view .end// ============ */
    </style>
     
    <script type="text/javascript">
            document.addEventListener("DOMContentLoaded", function(){
            /////// Prevent closing from click inside dropdown
            document.querySelectorAll('.dropdown-menu').forEach(function(element){
                    element.addEventListener('click', function (e) {
                            e.stopPropagation();
                    });
            })
        }); 
            // DOMContentLoaded  end
    </script>
     
    </head>
     
     
     
     
    	<div class="container">
     
    <!-- ============= COMPONENT ============== -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <div class="container-fluid">
    	<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main_nav"  aria-expanded="false" aria-label="Toggle navigation">
    		<span class="navbar-toggler-icon"></span>
    	</button>
    	<div class="collapse navbar-collapse" id="main_nav">
    		<ul class="navbar-nav">
    			<li class="nav-item active"> <a class="nav-link" href="#">Acceuil</a> </li>
    			<li class="nav-item dropdown has-megamenu">
    				<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown"> Mega menu  </a>
    				<div class="dropdown-menu megamenu" role="menu">
    					<div class="row g-3">
    						<div class="col-lg-3 col-6">
    							<div class="col-megamenu">
    								<h6 class="title">Title Menu One</h6>
    								<ul class="list-unstyled">
    									<li><a href="#">Droits de l'animal et devoirs de l’homme</a></li>
    									<li><a href="#">Custom Menu</a></li>
    									<li><a href="#">Custom Menu</a></li>
    									<li><a href="#">Custom Menu</a></li>
    									<li><a href="#">Custom Menu</a></li>
    									<li><a href="#">Custom Menu</a></li>
    								</ul>
    							</div>  <!-- col-megamenu.// -->
    						</div><!-- end col-3 -->
    						<div class="col-lg-3 col-6">
    							<div class="col-megamenu">
    								<h6 class="title">Title Menu Two</h6>
    								<ul class="list-unstyled">
    									<li><a href="#">Droits de l'animal et devoirs de l’homme</a></li>
    									<li><a href="#">Custom Menu</a></li>
    									<li><a href="#">Custom Menu</a></li>
    									<li><a href="#">Custom Menu</a></li>
    									<li><a href="#">Custom Menu</a></li>
    									<li><a href="#">Custom Menu</a></li>
    								</ul>
    							</div>  <!-- col-megamenu.// -->
    						</div><!-- end col-3 -->
    						<div class="col-lg-3 col-6">
    							<div class="col-megamenu">
    								<h6 class="title">Title Menu Three</h6>
    								<ul class="list-unstyled">
    									<li><a href="#">Droits de l'animal et devoirs de l’homme</a></li>
    									<li><a href="#">Custom Menu</a></li>
    									<li><a href="#">Custom Menu</a></li>
    									<li><a href="#">Custom Menu</a></li>
    									<li><a href="#">Custom Menu</a></li>
    									<li><a href="#">Custom Menu</a></li>
    								</ul>
    							</div>  <!-- col-megamenu.// -->
    						</div>    
    						<div class="col-lg-3 col-6">
    							<div class="col-megamenu">
    								<h6 class="title">Title Menu Four</h6>
    								<ul class="list-unstyled">
    									<li><a href="#">Droits de l'animal et devoirs de l’homme</a></li>
    									<li><a href="#">Custom Menu</a></li>
    									<li><a href="#">Custom Menu</a></li>
    									<li><a href="#">Custom Menu</a></li>
    									<li><a href="#">Custom Menu</a></li>
    									<li><a href="#">Custom Menu</a></li>
    								</ul>
    							</div>  <!-- col-megamenu.// -->
    						</div><!-- end col-3 -->
    					</div><!-- end row --> 
    				</div> <!-- dropdown-mega-menu.// -->
    			</li>
    		</ul>
    	</div> <!-- navbar-collapse.// -->
    </div> <!-- container-fluid.// -->
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main_nav"  aria-expanded="false" aria-label="Toggle navigation">
    		<span class="navbar-toggler-icon"></span>
    	</button>
    	<div class="collapse navbar-collapse" id="main_nav2">
    		<ul class="navbar-nav">
    			<li class="nav-item dropdown has-megamenu">
    				<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown"> Mega menu  </a>
    				<div class="dropdown-menu megamenu" role="menu">
    					<div class="row g-3">
    						<div class="col-lg-3 col-6">
    							<div class="col-megamenu">
    								<h6 class="title">Title Menu One</h6>
    								<ul class="list-unstyled">
    									<li><a href="#">Droits de l'animal et devoirs de l’homme</a></li>
    									<li><a href="#">Custom Menu</a></li>
    									<li><a href="#">Custom Menu</a></li>
    									<li><a href="#">Custom Menu</a></li>
    									<li><a href="#">Custom Menu</a></li>
    									<li><a href="#">Custom Menu</a></li>
    								</ul>
    							</div>  <!-- col-megamenu.// -->
    						</div><!-- end col-3 -->
    						<div class="col-lg-3 col-6">
    							<div class="col-megamenu">
    								<h6 class="title">Title Menu Two</h6>
    								<ul class="list-unstyled">
    									<li><a href="#">Droits de l'animal et devoirs de l’homme</a></li>
    									<li><a href="#">Custom Menu</a></li>
    									<li><a href="#">Custom Menu</a></li>
    									<li><a href="#">Custom Menu</a></li>
    									<li><a href="#">Custom Menu</a></li>
    									<li><a href="#">Custom Menu</a></li>
    								</ul>
    							</div>  <!-- col-megamenu.// -->
    						</div><!-- end col-3 -->
    						<div class="col-lg-3 col-6">
    							<div class="col-megamenu">
    								<h6 class="title">Title Menu Three</h6>
    								<ul class="list-unstyled">
    									<li><a href="#">Droits de l'animal et devoirs de l’homme</a></li>
    									<li><a href="#">Custom Menu</a></li>
    									<li><a href="#">Custom Menu</a></li>
    									<li><a href="#">Custom Menu</a></li>
    									<li><a href="#">Custom Menu</a></li>
    									<li><a href="#">Custom Menu</a></li>
    								</ul>
    							</div>  <!-- col-megamenu.// -->
    						</div>    
    						<div class="col-lg-3 col-6">
    							<div class="col-megamenu">
    								<h6 class="title">Title Menu Four</h6>
    								<ul class="list-unstyled">
    									<li><a href="#">Droits de l'animal et devoirs de l’homme</a></li>
    									<li><a href="#">Custom Menu</a></li>
    									<li><a href="#">Custom Menu</a></li>
    									<li><a href="#">Custom Menu</a></li>
    									<li><a href="#">Custom Menu</a></li>
    									<li><a href="#">Custom Menu</a></li>
    								</ul>
    							</div>  <!-- col-megamenu.// -->
    						</div><!-- end col-3 -->
    					</div><!-- end row --> 
    				</div> <!-- dropdown-mega-menu.// -->
    			</li>
    		</ul>
    	</div> <!-- navbar-collapse.// -->
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main_nav"  aria-expanded="false" aria-label="Toggle navigation">
    		<span class="navbar-toggler-icon"></span>
    	</button>
    	<div class="collapse navbar-collapse" id="main_nav3">
    		<ul class="navbar-nav">
    			<li class="nav-item dropdown has-megamenu">
    				<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown"> Mega menu  </a>
    				<div class="dropdown-menu megamenu" role="menu">
    					<div class="row g-3">
    						<div class="col-lg-3 col-6">
    							<div class="col-megamenu">
    								<h6 class="title">Title Menu One</h6>
    								<ul class="list-unstyled">
    									<li><a href="#">Droits de l'animal et devoirs de l’homme</a></li>
    									<li><a href="#">Custom Menu</a></li>
    									<li><a href="#">Custom Menu</a></li>
    									<li><a href="#">Custom Menu</a></li>
    									<li><a href="#">Custom Menu</a></li>
    									<li><a href="#">Custom Menu</a></li>
    								</ul>
    							</div>  <!-- col-megamenu.// -->
    						</div><!-- end col-3 -->
    						<div class="col-lg-3 col-6">
    							<div class="col-megamenu">
    								<h6 class="title">Title Menu Two</h6>
    								<ul class="list-unstyled">
    									<li><a href="#">Droits de l'animal et devoirs de l’homme</a></li>
    									<li><a href="#">Custom Menu</a></li>
    									<li><a href="#">Custom Menu</a></li>
    									<li><a href="#">Custom Menu</a></li>
    									<li><a href="#">Custom Menu</a></li>
    									<li><a href="#">Custom Menu</a></li>
    								</ul>
    							</div>  <!-- col-megamenu.// -->
    						</div><!-- end col-3 -->
    						<div class="col-lg-3 col-6">
    							<div class="col-megamenu">
    								<h6 class="title">Title Menu Three</h6>
    								<ul class="list-unstyled">
    									<li><a href="#">Droits de l'animal et devoirs de l’homme</a></li>
    									<li><a href="#">Custom Menu</a></li>
    									<li><a href="#">Custom Menu</a></li>
    									<li><a href="#">Custom Menu</a></li>
    									<li><a href="#">Custom Menu</a></li>
    									<li><a href="#">Custom Menu</a></li>
    								</ul>
    							</div>  <!-- col-megamenu.// -->
    						</div>    
    						<div class="col-lg-3 col-6">
    							<div class="col-megamenu">
    								<h6 class="title">Title Menu Four</h6>
    								<ul class="list-unstyled">
    									<li><a href="#">Droits de l'animal et devoirs de l’homme</a></li>
    									<li><a href="#">Custom Menu</a></li>
    									<li><a href="#">Custom Menu</a></li>
    									<li><a href="#">Custom Menu</a></li>
    									<li><a href="#">Custom Menu</a></li>
    									<li><a href="#">Custom Menu</a></li>
    								</ul>
    							</div>  <!-- col-megamenu.// -->
    						</div><!-- end col-3 -->
    					</div><!-- end row --> 
    				</div> <!-- dropdown-mega-menu.// -->
    			</li>
    		</ul>
    	</div> <!-- navbar-collapse.// -->
    		</div></nav>
    </html>

    Bonne journee

  11. #31
    Inactif  
    Homme Profil pro
    Webmaster
    Inscrit en
    Juin 2021
    Messages
    645
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 57
    Localisation : France, Pas de Calais (Nord Pas de Calais)

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

    Informations forums :
    Inscription : Juin 2021
    Messages : 645
    Points : 1 280
    Points
    1 280
    Par défaut
    Bonjour,

    comment veux-tu qu'on s'en sorte ?
    Tu changes sans arrêt d'avis... et de menu !!

    Cela dit, le dernier code fourni est PARFAITEMENT BIEN INDENTE :
    il n'y a aucune difficulté à identifier les différentes parties du menu.


    LISTE-nous ton MENU COMPLET (réel, avec sous-menus / méga-menus / ... / champ de recherche).
    On essaiera de le construire, ce menu...


    N.B. Et pour les autres qui souhaitent suivre la discussion... :


  12. #32
    Membre à l'essai
    Homme Profil pro
    Ac/ssociation
    Inscrit en
    Septembre 2021
    Messages
    39
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Dordogne (Aquitaine)

    Informations professionnelles :
    Activité : Ac/ssociation
    Secteur : Associations - ONG

    Informations forums :
    Inscription : Septembre 2021
    Messages : 39
    Points : 15
    Points
    15
    Par défaut
    Bonsoir et merci pour ta reponse,

    Je te laisse juge sur l'ergonomie...
    J'essaie juste de trouver le meilleur compromis....
    Ai une erreur ligne 267
    Si l'on pouvait faire en sorte que la navbar fasse toute la largeur, blanche et font noire, y inclure une recherche a droite.
    Je sais suis un emmerdeur mais c'est la fin de mon harcelement.Encore une fois fais comme il te semble le mieux
    Cordialement

    HTML
    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
    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
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    276
    277
    278
    279
    280
    281
    282
    283
    284
    285
    286
    287
    288
    289
    290
    291
    292
    293
    294
    295
    296
    297
    298
    299
    300
    301
    302
    303
    304
    305
    306
    307
    308
    309
    310
    311
    312
    313
    314
    315
    316
    317
    318
    319
    320
    321
    322
    323
    324
    325
    326
    327
    328
    329
    330
    331
    332
    333
    334
    335
    336
    337
    338
    339
    340
    341
    342
    343
    344
    345
    346
    347
    348
    349
    350
    351
    352
    353
    354
    355
    356
    357
    358
    359
    360
    361
    362
    363
    364
    365
    366
    367
    368
    <!DOCTYPE HTML>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="keywords" content="htmlcss bootstrap, multi level menu, submenu, treeview nav menu examples" />  
    <!-- chargement des feuilles de style -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">	
    <link href="css/Footer.css" rel="stylesheet" type="text/css">
    <link href="css/style.css" rel="stylesheet" type="text/css">
    <link href="css/navbar.css" rel="stylesheet" type="text/css">	
    <!-- Fin des feuilles de style -->
    <!-- Styles -->	
    <style type="text/css">
    @media all and (min-width: 992px) {
    .dropdown-menu li{ position: relative;}
    .dropdown-menu .submenu{ display: none;
                             position: absolute;
                             left:100%; top:-7px;}
    .dropdown-menu .submenu-left{ right:100%; left:auto; }
    .dropdown-menu > li:hover{ background-color: #151414 }
    .dropdown-menu > li:hover > 
    .submenu{ display: block;}}      
    @media (max-width: 1200px) {
    .dropdown-menu .dropdown-menu{ margin-left:0.7rem; margin-right:0.7rem; margin-bottom: .5rem;}} 
    </style>
    <!-- Fin des styles -->	
    <!-- Debut des scripts -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>	
    <script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function(){
    document.querySelectorAll('.dropdown-menu').forEach(function(element){ element.addEventListener('click', function (e) {
    e.stopPropagation();});}) if (window.innerWidth < 992) { document.querySelectorAll('.navbar .dropdown').forEach(function(everydropdown){ everydropdown.addEventListener('hidden.bs.dropdown', function () {
    this.querySelectorAll('.submenu').forEach(function(everysubmenu){ everysubmenu.style.display = 'none';});})});
    document.querySelectorAll('.dropdown-menu a').forEach(function(element){ element.addEventListener('click', function (e) {
    let nextEl = this.nextElementSibling;if(nextEl && nextEl.classList.contains('submenu')) { e.preventDefault();
    console.log(nextEl); if(nextEl.style.display == 'block'){ nextEl.style.display = 'none'; } else { nextEl.style.display = 'block';
    }}});})}}); 
    </script>
    <!-- Fin des scripts -->	
    </head>
    <body>
    <div class="container">
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <div class="container-fluid">
    <a class="navbar-brand" href="#">Acceuil</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main_nav"  aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="main_nav">
    <ul class="navbar-nav">
    <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Les races canines</a>
                    <ul class="dropdown-menu">
    				 <li><a class="dropdown-item" href="#">Rechercher une race</a></li>
                      <li><a class="dropdown-item" href="#">D'où vient le chien</a>
                      </li>
                      <li><a class="dropdown-item" href="#">Les documents de votre chien&raquo;</a>
                        <ul class="submenu dropdown-menu">
                          <li><a class="dropdown-item" href="#">Les documents généalogiques</a></li>
                          <li><a class="dropdown-item" href="#">La carte d'identification</a></li>
                          <li><a class="dropdown-item" href="#">Le passeport européen</a></li>
                        </ul></li>
                      <li><a class="dropdown-item" href="#">La confirmation&raquo;</a>
                        <ul class="submenu dropdown-menu">
                          <li><a class="dropdown-item" href="#">L'examen de confirmation</a></li>
                        </ul></li>
                      <li><a class="dropdown-item" href="#">Groupes et catégories</a></li>
                      <li><a class="dropdown-item" href="#">Le chien de race</a></li>
                    <li><a class="dropdown-item" href="#">Les races canines françaises</a></li>
    	          </ul></li></ul>
                     <ul class="navbar-nav">
                     <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Votre chien et vous</a>
                    <ul class="dropdown-menu">
    				 <li><a class="dropdown-item" href="#">Droits de l'animal et devoirs de l’homme</a></li>
                      <li><a class="dropdown-item" href="#">L'adoption&raquo;</a>
    					<ul class="submenu dropdown-menu">
                          <li><a class="dropdown-item" href="#">L'adoption d'un chiot</a></li>
                          <li><a class="dropdown-item" href="#">Adopter un chien adulte</a></li>
                          <li><a class="dropdown-item" href="#">L'arrivée d'un deuxième chien</a></li>
                        </ul></li>
                      <li><a class="dropdown-item" href="#">La cohabitation&raquo;</a>
                        <ul class="submenu dropdown-menu">
                          <li><a class="dropdown-item" href="#">Quand petit et grand chiens cohabitent</a></li>
                          <li><a class="dropdown-item" href="#">La cohabitation de mon chien avec d'autres espèces</a></li>
                          <li><a class="dropdown-item" href="#">Bébé arrive, comment gérer ?</a></li>
                          <li><a class="dropdown-item" href="#">Chien en location, impossible de vous l’interdire</a></li>
    					  <li><a class="dropdown-item" href="#">Jamais sans mon chien</a></li>
    					  </ul></li>
                         <li><a class="dropdown-item" href="#"><li><a class="dropdown-item" href="#">La responsabilité du propriétaire d’un chien</a></li></a></li>
                      <li><a class="dropdown-item" href="#">Responsabilités légales des maîtres</a></li>
                    <li><a class="dropdown-item" href="#">Quand on s’attache ou pas</a></li>
    	            <li><a class="dropdown-item" href="#">Dormir avec son animal</a></li>
    				<li><a class="dropdown-item" href="#">Les chiens distinguent les mots</a></li>
    				<li><a class="dropdown-item" href="#">Les jeux des chiens</a></li>
    	          </ul></li></ul>	  
                  <ul class="navbar-nav">
                  <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Mon chien</a>
                    <ul class="dropdown-menu">
    				 <li><a class="dropdown-item" href="#">Les 10 commandements du bon maitre</a></li>
                      <li><a class="dropdown-item" href="#">Mon chien...&raquo;</a>
    					<ul class="submenu dropdown-menu">
                          <li><a class="dropdown-item" href="#">fugue</a></li>
                          <li><a class="dropdown-item" href="#">n'est pas propre</a></li>
                          <li><a class="dropdown-item" href="#">ne m’écoute plus quand il croise un autre chien</a></li>
    					<li><a class="dropdown-item" href="#">est-il dominant</a></li>	
                        <li><a class="dropdown-item" href="#">se comporte comme un chiot</a></li>
                          <li><a class="dropdown-item" href="#">ne revient pas quand je l'appelle</a></li>
                          <li><a class="dropdown-item" href="#">s’arrête sans cesse pour renifler</a></li>
                          <li><a class="dropdown-item" href="#">ne pense qu'à lui</a></li>
    					  <li><a class="dropdown-item" href="#">mange n'importe quoi</a></li>
                          <li><a class="dropdown-item" href="#">mange mal</a></li>
                          <li><a class="dropdown-item" href="#">me parle</a></li>
                          <li><a class="dropdown-item" href="#">casse tout à la maison</a></li>
                        </ul></li></ul></li></ul>	  
    	               <ul class="navbar-nav">
                  <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Education/Comportement</a>
                    <ul class="dropdown-menu">
    				 <li><a class="dropdown-item" href="#">Psychologie canine et idées reçues</a></li>
    					<li><a class="dropdown-item" href="#">Comportement&raquo;</a>
    					<ul class="submenu dropdown-menu">
                          <li><a class="dropdown-item" href="#">La peur de la rue</a></li>
                          <li><a class="dropdown-item" href="#">Le chien parfait</a></li>
                          <li><a class="dropdown-item" href="#">Le chien médiateur</a></li>
                          <li><a class="dropdown-item" href="#">Le chien peureux</a></li>
    					  <li><a class="dropdown-item" href="#">Le chien phobique</a></li>
    					  <li><a class="dropdown-item" href="#">Le stress chez le chien</a></li>
    					  <li><a class="dropdown-item" href="#">Sevrage précoce et trouble du comportement</a></li>
                        </ul></li>
                      <li><a class="dropdown-item" href="#">Education&raquo;</a>
                        <ul class="submenu dropdown-menu">
                          <li><a class="dropdown-item" href="#">Instinct social et apprentissage des chiens</a></li>
                          <li><a class="dropdown-item" href="#">Pour qu'il devienne un chien bien dans sa peau</a></li>
                        </ul></li>
                      <li><a class="dropdown-item" href="#">Age et apprentissage&raquo;</a>
                        <ul class="submenu dropdown-menu">
                          <li><a class="dropdown-item" href="#">Lui apprendre la solitude</a></li>
                          <li><a class="dropdown-item" href="#">L’apprentissage de la propreté chez le chiot</a></li>
                          <li><a class="dropdown-item" href="#">Le chiot construit sa personnalité</a></li>
                          <li><a class="dropdown-item" href="#">L'école du chiot</a></li>
                        </ul></li>
                      <li><a class="dropdown-item" href="#">Psychologie canine et idées reçues</a></li>
                      <li><a class="dropdown-item" href="#">Développement comportemental du chiot</a></li>
                    <li><a class="dropdown-item" href="#">L'école du chiot</a></li>
    	            <li><a class="dropdown-item" href="#">Instinct social et apprentissage des chiens</a></li>
    	          <li><a class="dropdown-item" href="#">Les chiens n’ont-ils qu’un seul maître</a></li>
    	          </ul></li></ul>
    	 	               <ul class="navbar-nav">
                  <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Alimentation</a>
                    <ul class="dropdown-menu">
    				 <li><a class="dropdown-item" href="#">Petit récapitulatif sur l'alimentation du chien</a></li>
                      <li><a class="dropdown-item" href="#">En detail&raquo;</a>
    					<ul class="submenu dropdown-menu">
                          <li><a class="dropdown-item" href="#">Le format de la gamelle et quantité distribuée</a></li>
                          <li><a class="dropdown-item" href="#">La meilleure façon de nourrir votre chien</a></li>
                          <li><a class="dropdown-item" href="#">Alimentation ménagère du chien</a></li>
                        <li><a class="dropdown-item" href="#">Mode d'emploi de la ration mixte du chien</a></li>
                          <li><a class="dropdown-item" href="#">Mon chien peut-il manger chaud</a></li>
                          <li><a class="dropdown-item" href="#">Compléments alimentaires</a></li>
    					  <li><a class="dropdown-item" href="#">Les aliments diététiques pour chien</a></li>
                          <li><a class="dropdown-item" href="#">Friandises pour chiens</a></li>
                          <li><a class="dropdown-item" href="#">Que doit comporter une étiquette de croquettes</a></li>
                          <li><a class="dropdown-item" href="#">La supplémentation dans l'alimentation du chien</a></li>
                        <li><a class="dropdown-item" href="#">L'Alimentation du chien de sport</a></li>
                          <li><a class="dropdown-item" href="#">L'alimentation du chien de chasse</a></li>
                          <li><a class="dropdown-item" href="#">Bien nourrir nos meutes de chiens courants</a></li>
    						<li><a class="dropdown-item" href="#">L'alimentation du chien difficile</a></li>
                          <li><a class="dropdown-item" href="#">L'alimentation du chien en surpoids</a></li>
                          <li><a class="dropdown-item" href="#">Le chien "Gros Mangeur"</a></li>
                          <li><a class="dropdown-item" href="#">Conserver les aliments de nos chiens</a></li>
                        <li><a class="dropdown-item" href="#">La ration de nourriture quand il fait froid</a></li>
                          <li><a class="dropdown-item" href="#">Les troubles digestifs chez le chien</a></li>
    						<li><a class="dropdown-item" href="#">Recette de biscuits pour chien</a></li>
                        </ul></li>
                      <li><a class="dropdown-item" href="#">Ce qu'il faut éviter&raquo;</a>
                        <ul class="submenu dropdown-menu">
                          <li><a class="dropdown-item" href="#">Les aliments dangereux pour le chien</a></li>
                          <li><a class="dropdown-item" href="#">Les aliments que nos chiens doivent éviter</a></li>
                          <li><a class="dropdown-item" href="#">Les erreurs alimentaires classiques</a></li>
                        </ul></li>
                      <li><a class="dropdown-item" href="#">Les règles de base&raquo;</a>
                        <ul class="submenu dropdown-menu">
                            <li><a class="dropdown-item" href="#">Les besoins alimentaires du chien</a></li>
                          <li><a class="dropdown-item" href="#">La transition alimentaire du chien</a></li>
                          <li><a class="dropdown-item" href="#">Alimentation, croissance et santé</a></li>
                          <li><a class="dropdown-item" href="#">Les besoins nutritionnels du chien</a></li>
                        <li><a class="dropdown-item" href="#">La saveur des aliments</a></li>
                          <li><a class="dropdown-item" href="#">Rôle des nutriments</a></li>
    						<li><a class="dropdown-item" href="#">Rôle des acides gras</a></li>
                          <li><a class="dropdown-item" href="#">Allergie alimentaire</a></li>
                          <li><a class="dropdown-item" href="#">Changer de marque sans grève de la faim</a></li>
                          <li><a class="dropdown-item" href="#">Dilatation torsion d'estomac</a></li>
                        <li><a class="dropdown-item" href="#">Obésité, une influence génétique complexe</a></li>
                          <li><a class="dropdown-item" href="#">Les besoins en eau d'un chien</a></li>
    						<li><a class="dropdown-item" href="#">L'alimentation de votre chien</a></li>
                        </ul></li></ul></li></ul>
    	                <ul class="navbar-nav">
                      <li class="nav-item dropdown">
                      <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Santé et bien-être</a>
                      <ul class="dropdown-menu">
    				  <li><a class="dropdown-item" href="#">Guide des bonnes pratiques</a></li>
                      <li><a class="dropdown-item" href="#">Suivi de santé : Dépistage affections&raquo;</a>
    					<ul class="submenu dropdown-menu">
                          <li><a class="dropdown-item" href="#">L'offre génomiquede la SCC</a></li>
                          <li><a class="dropdown-item" href="#">Le dépistage des tares oculaires</a></li>
                          <li><a class="dropdown-item" href="#">Maladies héréditaires</a></li>
                        </ul></li>
                      <li><a class="dropdown-item" href="#">Maladies héréditaires&raquo;</a>
                        <ul class="submenu dropdown-menu">
                          <li><a class="dropdown-item" href="#">L'anomalie de l'oeil du Colley</a></li>
                          <li><a class="dropdown-item" href="#">La Dysplasie de la rétine</a></li>
                          <li><a class="dropdown-item" href="#">La Cardiomyopathie dilatée</a></li>
                          <li><a class="dropdown-item" href="#">La cataracte</a></li>
                          <li><a class="dropdown-item" href="#">La cécité nocturne</a></li>
    					  </ul></li>
                      <li><a class="dropdown-item" href="#">Autres affections de votre chien&raquo;</a>
                        <ul class="submenu dropdown-menu">
                          <li><a class="dropdown-item" href="#">L'Acidurie</a></li>
                          <li><a class="dropdown-item" href="#">L'Adénite sébacée</a></li>
                          <li><a class="dropdown-item" href="#">Les anomalies vertébrales</a></li>
                          <li><a class="dropdown-item" href="#">Arthrose et activité physique</a></li>
                        <li><a class="dropdown-item" href="#">Les boiteries</a></li>
                          <li><a class="dropdown-item" href="#">Le cancer de la peau</a></li>
                          <li><a class="dropdown-item" href="#">Le cancer de la langue</a></li>
                          <li><a class="dropdown-item" href="#">Les chenilles processionnaires</a></li>
    					  <li><a class="dropdown-item" href="#">Dépigmentation de la truffe</a></li>
                          <li><a class="dropdown-item" href="#">Comment gérer son diabète</a></li>
                          <li><a class="dropdown-item" href="#">Prostate et hyperplasie bénigne (HBP)</a></li>
    					  </ul></li>
    					<li><a class="dropdown-item" href="#">Service ADN&raquo;</a>
                        <ul class="submenu dropdown-menu">
                          <li><a class="dropdown-item" href="#">Les tests génomiques</a></li>
                          <li><a class="dropdown-item" href="#">L'offre génomique de la SCC</a></li>
                          <li><a class="dropdown-item" href="#">Du nouveau dans les tests</a></li>
                          <li><a class="dropdown-item" href="#">ADN, Identification et filiation</a></li>
                        <li><a class="dropdown-item" href="#">Tests, Petits rappels</a></li>
                          <li><a class="dropdown-item" href="#">Tests, Les bonnes questions</a></li>
                          <li><a class="dropdown-item" href="#">Tests, Test de santé ou Test confort</a></li>
    						<li><a class="dropdown-item" href="#">Quels tests de confort pour mon chien</a></li>
                        <li><a class="dropdown-item" href="#">Identification Génétique</a></li>
                          <li><a class="dropdown-item" href="#">Identification, les cas particuliers</a></li>
                          <li><a class="dropdown-item" href="#">Formulaires de commande</a></li>
    						 <li><a class="dropdown-item" href="#">Le stand ADN dans les expositions</a></li>
    						</ul></li>
                      <li><a class="dropdown-item" href="#">Le syndrome brachycéphale et le BREATH</a></li>
                      <li><a class="dropdown-item" href="#">Lexique des abréviations santé</a></li>
                      <li><a class="dropdown-item" href="#">Vaccination</a></li>
    	              <li><a class="dropdown-item" href="#">La Dysplasie du coude</a></li>
    	              <li><a class="dropdown-item" href="#">La beauté du poil</a></li>
    				  <li><a class="dropdown-item" href="#">Vétérinaires</a></li>	
    				  </ul></li></ul>
    	 	           <ul class="navbar-nav">
                      <li class="nav-item dropdown">
                      <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Nos amis</a>
                      <ul class="dropdown-menu">
    				 <li><a class="dropdown-item" href="#">Refuges SPA</a></li>
    					<li><a class="dropdown-item" href="#">Chiens perdus</a></li> 
    					<li><a class="dropdown-item" href="#">Chiens trouvés</a></li>  
     
                      <li><a class="dropdown-item" href="#">Adopter un chien a la SPA</a></li>
                      <li><a class="dropdown-item" href="#">Petites annonces</a></li>
    					  <li><a class="dropdown-item" href="#">Eleveurs recommandés</a></li>	  
    	          </ul></ul>
    	 	 	   <ul class="navbar-nav">
                      <li class="nav-item dropdown">
                      <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Partenariat</a>
                      <ul class="dropdown-menu">
    				 <li><a class="dropdown-item" href="#">Definition du programme</a></li>
    					<li><a class="dropdown-item" href="#">Pourquoi devenir partenaire</a></li>
    					<li><a class="dropdown-item" href="#">Partenaires</a></li>
    					<li><a class="dropdown-item" href="#">Offre de partenariat</a></li>
    					<li><a class="dropdown-item" href="#">Demande de partenariat</a></li>
    					<li><a class="dropdown-item" href="#">Programme d'essai</a></li>  
    					<li><a class="dropdown-item" href="#">Contact</a></li>
                       </ul></li>
    	          </ul>
    	 </div>
     </div>
    </nav>
    <section class="section-content py-5">
    </section>
    </div>
    </body>
    <img src="Images/communes/fond1.png" alt="" class="image_responsive" width="1575" height="325">
    <!-- Fin Menu --> 
    <!-- Debut Breadcrumb -->	 
    	<div class="container-fluid1">
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
              <li class="breadcrumb-item"><a href="index.html">Accueil</a></li>
              <li class="breadcrumb-item active" aria-current="page">Accés restreint</li>
            </ol>
          </nav>
        </div>
    <!-- Fin Breadcrumb -->	
    <!-- Debut contenu-->	
     
     
    <!--Fin contenu-->
    <!--Footer-->
     <div class="container p-4">
          <div class="row">
            <div class="col-lg-3 col-md-6 mb-4 mb-lg-0">
              <h5 class="text-uppercase mb-4">OUR WORLD</h5>
     
              <ul class="list-unstyled mb-4">
                <li>
                  <a href="#!" class="text-white">About us</a>
                </li>
                <li>
                  <a href="#!" class="text-white">Collections</a>
                </li>
                <li>
                  <a href="#!" class="text-white">Environmental philosophy</a>
                </li>
                <li>
                  <a href="#!" class="text-white">Artist collaborations</a>
                </li>
              </ul>
            </div>
    <div class="col-lg-3 col-md-6 mb-4 mb-lg-0">
              <h5 class="text-uppercase mb-4">Assistance</h5>
     
              <ul class="list-unstyled">
                <li>
                  <a href="#!" class="text-white">Contact us</a>
                </li>
                <li>
                  <a href="#!" class="text-white">Size Guide</a>
                </li>
                <li>
                  <a href="#!" class="text-white">Shipping Information</a>
                </li>
                <li>
                  <a href="#!" class="text-white">Returns & Exchanges</a>
                </li>
                <li>
                  <a href="#!" class="text-white">Payment</a>
                </li>
              </ul>
            </div>
     <div class="col-lg-3 col-md-6 mb-4 mb-lg-0">
              <h5 class="text-uppercase mb-4">Careers</h5>
    <ul class="list-unstyled">
                <li>
                  <a href="#!" class="text-white">Jobs</a>
                </li>
              </ul>
            </div>
     <div class="col-lg-3 col-md-6 mb-4 mb-lg-0">
              <h5 class="text-uppercase mb-4">Sign up to our newsletter</h5>
     <div class="form-outline form-white mb-4">
                <input type="email" id="form5Example2" class="form-control" />
                <label class="form-label" for="form5Example2">Email address</label>
              </div>
    <button type="submit" class="btn btn-outline-white btn-block">Subscribe</button>
            </div>
    </div>
        </div>
        <div class="text-center p-3 border-top border-white">
          © 2020 Copyright:
          <a class="text-white" href="#">Mediassistance</a>
        </div>
    </html>


    Bonne soiree

  13. #33
    Inactif  
    Homme Profil pro
    Webmaster
    Inscrit en
    Juin 2021
    Messages
    645
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 57
    Localisation : France, Pas de Calais (Nord Pas de Calais)

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

    Informations forums :
    Inscription : Juin 2021
    Messages : 645
    Points : 1 280
    Points
    1 280
    Par défaut
    Bonjour,

    sur smartphone, les sous-sous-menus ne fonctionnent pas.
    Je te l'ai dit... mais tu n'en fait qu'à ta tête....

    De plus, il y a BEAUCOUP TROP de rubriques !
    C'est BEAUCOUP TROP complexe !
    Une chienne n'y retrouverait pas ses petits !

    Le menu n'est pas censé être une liste exhaustive des "articles" !...
    Au contraire, il vaut mieux :
    • avoir un menu SIMPLE et CLAIR (rubriques principales)
    • REGROUPER les articles d'une même rubrique sur LA MÊME PAGE (cela augmente le contenu, et améliore le référencement de LA PAGE)
    • éventuellement, sur CES PAGES, avoir un "menu secondaire" reprenant les titres des articles de cette page (avec des liens/ancres vers chaque article)

  14. #34
    Inactif  
    Homme Profil pro
    Webmaster
    Inscrit en
    Juin 2021
    Messages
    645
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 57
    Localisation : France, Pas de Calais (Nord Pas de Calais)

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

    Informations forums :
    Inscription : Juin 2021
    Messages : 645
    Points : 1 280
    Points
    1 280
    Par défaut
    C'EST BON.

    J'ai le MENU de tes rêves



    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
    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
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    276
    277
    278
    279
    280
    281
    282
    283
    284
    285
    286
    287
    288
    289
    290
    291
    292
    293
    294
    295
    296
    297
    298
    299
    300
    301
    302
    303
    304
    305
    306
    307
    308
    309
    310
    311
    312
    313
    314
    315
    316
    317
    318
    319
    320
    321
    322
    323
    324
    325
    326
    327
    328
    329
    330
    331
    332
    333
    334
    335
    336
    337
    338
    339
    340
    341
    342
    343
    344
    345
    346
    347
    348
    349
    350
    351
    352
    353
    354
    355
    356
    357
    358
    359
    360
    361
    362
    363
    364
    365
    366
    367
    368
    369
    370
    371
    372
    373
    374
    375
    376
    377
    378
    379
    380
    381
    382
    383
    384
    385
    386
    387
    388
    389
    390
    391
    392
    393
    394
    395
    396
    397
    398
    399
    400
    401
    402
    403
    404
    405
    406
    407
    408
    409
    410
    411
    412
    413
    414
    415
    416
    417
    418
    419
    420
    421
    422
    423
    424
    425
    426
    427
    428
    429
    430
    431
    432
    433
    434
    435
    436
    437
    438
    439
    440
    441
    442
    443
    444
    445
    446
    447
    448
    449
    450
    451
    452
    453
    454
    455
    456
    457
    458
    459
    460
    461
    462
    463
    464
    465
    466
    467
    468
    469
    470
    471
    472
    473
    474
    475
    476
    477
    478
    479
    480
    481
    482
    483
    484
    485
    486
    487
    488
    489
    490
    491
    492
    493
    494
    495
    496
    497
    498
    499
    500
    501
    502
    503
    504
    505
    506
    507
    508
    509
    510
    511
    512
    513
    514
    515
    516
    517
    518
    519
    520
    521
    522
    523
    524
    525
    526
    527
    528
    529
    530
    531
    532
    533
    534
    535
    536
    537
    538
    539
    540
    541
    542
    543
    544
    545
    546
    547
    548
    549
    550
    551
    552
    553
    554
    555
    556
    557
    558
    559
    560
    561
    562
    563
    564
    565
    566
    567
    568
    569
    570
    571
    572
    573
    574
    575
    576
    577
    578
    <header class="container-fluid">
        <nav class="navbar navbar-expand-lg navbar-light bg-light" aria-label="Fifth navbar example" style="max-width:100%;">
          <a class="navbar-brand" href="#">(logo)</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsMain" aria-controls="navbarsMain" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
     
          <div class="collapse navbar-collapse" id="navbarsMain">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0 flex-wrap">
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Les races canines</a>
                <ul class="dropdown-menu">
                  <li>
                    <a class="dropdown-item" href="#">Rechercher une race</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">D'où vient le chien</a>
                  </li>
                  <li class="dropdown-submenu">
                    <a class="dropdown-item dropdown-toggle" href="#">Les documents de votre chien</a>
                    <ul class="dropdown-menu">
                      <li>
                        <a class="dropdown-item" href="#">Les documents généalogiques</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">La carte d'identification</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Le passeport européen</a>
                      </li>
                    </ul>
                  </li>
                  <li class="dropdown-submenu">
                    <a class="dropdown-item dropdown-toggle" href="#">La confirmation</a>
                    <ul class="dropdown-menu">
                      <li>
                        <a class="dropdown-item" href="#">L'examen de confirmation</a>
                      </li>
                    </ul>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">Groupes et catégories</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">Le chien de race</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">Les races canines françaises</a>
                  </li>
                </ul>
              </li>
     
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Votre chien et vous</a>
                <ul class="dropdown-menu">
                  <li>
                    <a class="dropdown-item" href="#">Droits de l'animal et devoirs de l’homme</a>
                  </li>
                  <li class="dropdown-submenu">
                    <a class="dropdown-item dropdown-toggle" href="#">L'adoption</a>
                    <ul class="dropdown-menu">
                      <li>
                        <a class="dropdown-item" href="#">L'adoption d'un chiot</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Adopter un chien adulte</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">L'arrivée d'un deuxième chien</a>
                      </li>
                    </ul>
                  </li>
                  <li class="dropdown-submenu">
                    <a class="dropdown-item dropdown-toggle" href="#">La cohabitation</a>
                    <ul class="dropdown-menu">
                      <li>
                        <a class="dropdown-item" href="#">Quand petit et grand chiens cohabitent</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">La cohabitation de mon chien avec d'autres espèces</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Bébé arrive, comment gérer ?</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Chien en location, impossible de vous l’interdire</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Jamais sans mon chien</a>
                      </li>
                    </ul>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">
                      <li>
                        <a class="dropdown-item" href="#">La responsabilité du propriétaire d’un chien</a>
                      </li>
                    </a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">Responsabilités légales des maîtres</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">Quand on s’attache ou pas</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">Dormir avec son animal</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">Les chiens distinguent les mots</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">Les jeux des chiens</a>
                  </li>
                </ul>
              </li>
     
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Mon chien</a>
                <ul class="dropdown-menu">
                  <li>
                    <a class="dropdown-item" href="#">Les 10 commandements du bon maitre</a>
                  </li>
                  <li class="dropdown-submenu">
                    <a class="dropdown-item dropdown-toggle" href="#">Mon chien...</a>
                    <ul class="dropdown-menu">
                      <li>
                        <a class="dropdown-item" href="#">fugue</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">n'est pas propre</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">ne m’écoute plus quand il croise un autre chien</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">est-il dominant</a>
                      </li>	
                      <li>
                        <a class="dropdown-item" href="#">se comporte comme un chiot</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">ne revient pas quand je l'appelle</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">s’arrête sans cesse pour renifler</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">ne pense qu'à lui</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">mange n'importe quoi</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">mange mal</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">me parle</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">casse tout à la maison</a>
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
     
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Education/Comportement</a>
                <ul class="dropdown-menu">
                  <li>
                    <a class="dropdown-item" href="#">Psychologie canine et idées reçues</a>
                  </li>
                  <li class="dropdown-submenu">
                    <a class="dropdown-item dropdown-toggle" href="#">Comportement</a>
                    <ul class="dropdown-menu">
                      <li>
                        <a class="dropdown-item" href="#">La peur de la rue</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Le chien parfait</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Le chien médiateur</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Le chien peureux</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Le chien phobique</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Le stress chez le chien</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Sevrage précoce et trouble du comportement</a>
                      </li>
                    </ul>
                  </li>
                  <li class="dropdown-submenu">
                    <a class="dropdown-item dropdown-toggle" href="#">Education</a>
                    <ul class="dropdown-menu">
                      <li>
                        <a class="dropdown-item" href="#">Instinct social et apprentissage des chiens</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Pour qu'il devienne un chien bien dans sa peau</a>
                      </li>
                    </ul>
                  </li>
                  <li class="dropdown-submenu">
                    <a class="dropdown-item dropdown-toggle" href="#">Age et apprentissage</a>
                    <ul class="dropdown-menu">
                      <li>
                        <a class="dropdown-item" href="#">Lui apprendre la solitude</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">L’apprentissage de la propreté chez le chiot</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Le chiot construit sa personnalité</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">L'école du chiot</a>
                      </li>
                    </ul>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">Psychologie canine et idées reçues</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">Développement comportemental du chiot</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">L'école du chiot</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">Instinct social et apprentissage des chiens</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">Les chiens n’ont-ils qu’un seul maître</a>
                  </li>
                </ul>
              </li>
     
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Alimentation</a>
                <ul class="dropdown-menu">
                  <li>
                    <a class="dropdown-item" href="#">Petit récapitulatif sur l'alimentation du chien</a>
                  </li>
                  <li class="dropdown-submenu">
                    <a class="dropdown-item dropdown-toggle" href="#">En detail</a>
                    <ul class="dropdown-menu">
                      <li>
                        <a class="dropdown-item" href="#">Le format de la gamelle et quantité distribuée</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">La meilleure façon de nourrir votre chien</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Alimentation ménagère du chien</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Mode d'emploi de la ration mixte du chien</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Mon chien peut-il manger chaud</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Compléments alimentaires</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Les aliments diététiques pour chien</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Friandises pour chiens</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Que doit comporter une étiquette de croquettes</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">La supplémentation dans l'alimentation du chien</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">L'Alimentation du chien de sport</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">L'alimentation du chien de chasse</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Bien nourrir nos meutes de chiens courants</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">L'alimentation du chien difficile</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">L'alimentation du chien en surpoids</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Le chien "Gros Mangeur"</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Conserver les aliments de nos chiens</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">La ration de nourriture quand il fait froid</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Les troubles digestifs chez le chien</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Recette de biscuits pour chien</a>
                      </li>
                    </ul>
                  </li>
                  <li class="dropdown-submenu">
                    <a class="dropdown-item dropdown-toggle" href="#">Ce qu'il faut éviter</a>
                    <ul class="dropdown-menu">
                      <li>
                        <a class="dropdown-item" href="#">Les aliments dangereux pour le chien</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Les aliments que nos chiens doivent éviter</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Les erreurs alimentaires classiques</a>
                      </li>
                    </ul>
                  </li>
                  <li class="dropdown-submenu">
                    <a class="dropdown-item dropdown-toggle" href="#">Les règles de base</a>
                    <ul class="dropdown-menu">
                      <li>
                        <a class="dropdown-item" href="#">Les besoins alimentaires du chien</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">La transition alimentaire du chien</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Alimentation, croissance et santé</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Les besoins nutritionnels du chien</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">La saveur des aliments</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Rôle des nutriments</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Rôle des acides gras</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Allergie alimentaire</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Changer de marque sans grève de la faim</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Dilatation torsion d'estomac</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Obésité, une influence génétique complexe</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Les besoins en eau d'un chien</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">L'alimentation de votre chien</a>
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
     
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Santé et bien-être</a>
                <ul class="dropdown-menu">
                  <li>
                    <a class="dropdown-item" href="#">Guide des bonnes pratiques</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">Suivi de santé : Dépistage affections</a>
                    <ul class="dropdown-menu">
                      <li>
                        <a class="dropdown-item" href="#">L'offre génomiquede la SCC</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Le dépistage des tares oculaires</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Maladies héréditaires</a>
                      </li>
                    </ul>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">Maladies héréditaires</a>
                    <ul class="dropdown-menu">
                      <li>
                        <a class="dropdown-item" href="#">L'anomalie de l'oeil du Colley</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">La Dysplasie de la rétine</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">La Cardiomyopathie dilatée</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">La cataracte</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">La cécité nocturne</a>
                      </li>
                    </ul>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">Autres affections de votre chien</a>
                    <ul class="dropdown-menu">
                      <li>
                        <a class="dropdown-item" href="#">L'Acidurie</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">L'Adénite sébacée</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Les anomalies vertébrales</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Arthrose et activité physique</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Les boiteries</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Le cancer de la peau</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Le cancer de la langue</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Les chenilles processionnaires</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Dépigmentation de la truffe</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Comment gérer son diabète</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Prostate et hyperplasie bénigne (HBP)</a>
                      </li>
                    </ul>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">Service ADN</a>
                    <ul class="dropdown-menu">
                      <li>
                        <a class="dropdown-item" href="#">Les tests génomiques</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">L'offre génomique de la SCC</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Du nouveau dans les tests</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">ADN, Identification et filiation</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Tests, Petits rappels</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Tests, Les bonnes questions</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Tests, Test de santé ou Test confort</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Quels tests de confort pour mon chien</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Identification Génétique</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Identification, les cas particuliers</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Formulaires de commande</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Le stand ADN dans les expositions</a>
                      </li>
                    </ul>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">Le syndrome brachycéphale et le BREATH</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">Lexique des abréviations santé</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">Vaccination</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">La Dysplasie du coude</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">La beauté du poil</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">Vétérinaires</a>
                  </li>	
                </ul>
              </li>
     
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Nos amis</a>
                <ul class="dropdown-menu">
                  <li>
                    <a class="dropdown-item" href="#">Refuges SPA</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">Chiens perdus</a>
                  </li> 
                  <li>
                    <a class="dropdown-item" href="#">Chiens trouvés</a>
                  </li>  
     
                  <li>
                    <a class="dropdown-item" href="#">Adopter un chien a la SPA</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">Petites annonces</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">Eleveurs recommandés</a>
                  </li>	  
                </ul>
              </li>
     
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Partenariat</a>
                <ul class="dropdown-menu">
                  <li>
                    <a class="dropdown-item" href="#">Definition du programme</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">Pourquoi devenir partenaire</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">Partenaires</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">Offre de partenariat</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">Demande de partenariat</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">Programme d'essai</a>
                  </li>  
                  <li>
                    <a class="dropdown-item" href="#">Contact</a>
                  </li>
                </ul>
              </li>
            </ul>
            <form method="post" action="">
              <div class="input-group">
                <input class="form-control" type="text" placeholder="Search" aria-label="Search" aria-describedby="button-addon-Search">
                <button class="btn btn-outline-secondary" type="submit" id="button-addon-Search">Go</button>
              </div>
            </form>
          </div>
        </nav>
    </header>
    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
    /* ---------------------- */
    /* - BOOTSTRAP 5 - SOUS-MENU - */
    .dropdown-submenu {
      position: relative;
    }
    .dropdown-submenu .dropdown-menu {
      top: 0;
      left: 100%;
      margin-left: .1rem;
      margin-right: .1rem;
    }
    /* SPECIAL : ROTATION des flèches */
    .dropdown-submenu a::after {
      transform: rotate(-90deg);
      position: absolute;
      right: 6px;
      top: .8em;
    }
     
    /* --------------------- */
    /* SPECIAL : ROTATION des flèches */
    /* Niveau 1 */
    li .dropdown-toggle:after {
      transition: all 0.5s;
    }
    li.show > .dropdown-toggle:after {
      transform: rotate(180deg);
    }
    /* sous-Niveaux suivants */
    li li.show > .dropdown-toggle:after {
      transform: rotate(90deg);
    }
    /* --------------------- */
    Code js : 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
    // -------------------------------------------------
    // Bootstrap 5 : Responsive Dropdown Multi Submenu
    // -------------------------------------------------
    window.addEventListener("DOMContentLoaded", (event) => {
      "use strict";
      // navbar : management of Submenus
      // récup. des acteurs
      const elemNav = document.querySelectorAll(".navbar .nav-item");
      const elemToggle = document.querySelectorAll(".navbar .dropdown-menu a.dropdown-toggle");
      // affectation des clics
      elemNav.forEach((nav) => {
        nav.addEventListener('click', (e) => {
          elemToggle.forEach((elem) => {
            elem.parentElement.classList.remove('show');
            elem.nextElementSibling.classList.remove('show');
          });
        })
      });
     // au clic
      elemToggle.forEach((elt) => {
        elt.addEventListener('click', (e) => {
          e.stopPropagation();
          e.preventDefault();
          let subMenu = elt.nextElementSibling;
          if (!subMenu.classList.contains('show')) {
            const dropMenu = elt.closest(".dropdown-menu");
            dropMenu.querySelectorAll('.show').forEach((elem) => {
              elem.classList.remove('show');
            });
          }
          subMenu.classList.toggle('show'); // appliqué au ul
          elt.parentNode.classList.toggle('show'); // appliqué au li parent
        });
      });
    });
    // -------------------------------------------------
    [EDIT] J'ai repris le code JS de Nosmoking

  15. #35
    Membre à l'essai
    Homme Profil pro
    Ac/ssociation
    Inscrit en
    Septembre 2021
    Messages
    39
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Dordogne (Aquitaine)

    Informations professionnelles :
    Activité : Ac/ssociation
    Secteur : Associations - ONG

    Informations forums :
    Inscription : Septembre 2021
    Messages : 39
    Points : 15
    Points
    15
    Par défaut
    Bonjour,
    j'ai pris note du temps et des efforts dont tu as fais preuve pour m'aider et t'en remercie vivement.
    C'est tres sympa de ta part,
    Il y a un leger probleme, tout s'affiche mais les onglets ne marchent pas.

    Je te joins le code, tu pourras constater que j'ai fait un copier/coller.
    Je te renouvelle mes plus grands remerciements.
    Merci encore

    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
    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
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    276
    277
    278
    279
    280
    281
    282
    283
    284
    285
    286
    287
    288
    289
    290
    291
    292
    293
    294
    295
    296
    297
    298
    299
    300
    301
    302
    303
    304
    305
    306
    307
    308
    309
    310
    311
    312
    313
    314
    315
    316
    317
    318
    319
    320
    321
    322
    323
    324
    325
    326
    327
    328
    329
    330
    331
    332
    333
    334
    335
    336
    337
    338
    339
    340
    341
    342
    343
    344
    345
    346
    347
    348
    349
    350
    351
    352
    353
    354
    355
    356
    357
    358
    359
    360
    361
    362
    363
    364
    365
    366
    367
    368
    369
    370
    371
    372
    373
    374
    375
    376
    377
    378
    379
    380
    381
    382
    383
    384
    385
    386
    387
    388
    389
    390
    391
    392
    393
    394
    395
    396
    397
    398
    399
    400
    401
    402
    403
    404
    405
    406
    407
    408
    409
    410
    411
    412
    413
    414
    415
    416
    417
    418
    419
    420
    421
    422
    423
    424
    425
    426
    427
    428
    429
    430
    431
    432
    433
    434
    435
    436
    437
    438
    439
    440
    441
    442
    443
    444
    445
    446
    447
    448
    449
    450
    451
    452
    453
    454
    455
    456
    457
    458
    459
    460
    461
    462
    463
    464
    465
    466
    467
    468
    469
    470
    471
    472
    473
    474
    475
    476
    477
    478
    479
    480
    481
    482
    483
    484
    485
    486
    487
    488
    489
    490
    491
    492
    493
    494
    495
    496
    497
    498
    499
    500
    501
    502
    503
    504
    505
    506
    507
    508
    509
    510
    511
    512
    513
    514
    515
    516
    517
    518
    519
    520
    521
    522
    523
    524
    525
    526
    527
    528
    529
    530
    531
    532
    533
    534
    535
    536
    537
    538
    539
    540
    541
    542
    543
    544
    545
    546
    547
    548
    549
    550
    551
    552
    553
    554
    555
    556
    557
    558
    559
    560
    561
    562
    563
    564
    565
    566
    567
    568
    569
    570
    571
    572
    573
    574
    575
    576
    577
    578
    579
    580
    581
    582
    583
    584
    585
    586
    587
    588
    589
    590
    591
    592
    593
    594
    595
    596
    597
    598
    599
    600
    601
    602
    603
    604
    605
    606
    607
    608
    609
    610
    611
    612
    613
    614
    615
    616
    617
    618
    619
    620
    621
    622
    623
    624
    625
    626
    627
    628
    629
    630
    631
    632
    633
    634
    635
    636
    637
    638
    639
    640
    641
    642
    643
    644
    645
    646
    647
    648
    649
    650
    651
    652
    653
    654
    655
    656
    657
    658
    659
    660
    661
    662
    663
    664
    665
    666
    667
    668
    669
    670
    671
    672
    673
    674
    675
    676
    677
    678
    679
    680
    681
    682
    683
    684
    685
    686
    687
    688
    689
    690
    691
    692
    693
    694
    695
    696
    697
    698
    699
    700
    701
    702
    703
    704
    705
    706
    707
    708
    709
    710
    711
    712
    713
    714
    715
    716
    717
    718
    719
    720
    721
    722
    723
    724
    725
    726
    727
    728
    <!DOCTYPE html>
    <html lang="fr">
    <meta charset="utf-8">
    <meta name="ROBOTS" content="all">
    <meta name="keywords" content="mot clé 1,mot cle 2,Mot clé 3, Mots clefs">
    <meta name="title" content="">	
    <title>Guide des Bonnes Pratiques pour le Bien-être</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="keywords" content="htmlcss bootstrap, multi level menu, submenu, treeview nav menu examples" />  
    <!-- chargement des feuilles de style -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">	
    <link href="css/Footer.css" rel="stylesheet" type="text/css">
    <link href="css/style.css" rel="stylesheet" type="text/css">	
    <!-- Fin des feuilles de style -->
    <!-- Styles -->
    <style>
    /* ---------------------- */
    /* - BOOTSTRAP 5 - SOUS-MENU - */
    .dropdown-submenu {
      position: relative;
    }
    .dropdown-submenu .dropdown-menu {
      top: 0;
      left: 100%;
      margin-left: .1rem;
      margin-right: .1rem;
    }
    /* SPECIAL : ROTATION des flèches */
    .dropdown-submenu a::after {
      transform: rotate(-90deg);
      position: absolute;
      right: 6px;
      top: .8em;
    }
     
    /* --------------------- */
    /* SPECIAL : ROTATION des flèches */
    /* Niveau 1 */
    li .dropdown-toggle:after {
      transition: all 0.5s;
    }
    li.show > .dropdown-toggle:after {
      transform: rotate(180deg);
    }
    /* sous-Niveaux suivants */
    li li.show > .dropdown-toggle:after {
      transform: rotate(90deg);
    }
    /* --------------------- */
            
    </style>	
    <!-- Fin des styles -->	
    <!-- Debut des scripts -->
    <script>
    // ---------------------------------------------------------
    // Bootstrap 5 : Responsive Dropdown Multi Submenu
    // ---------------------------------------------------------
    window.addEventListener("DOMContentLoaded", (event) => {
      "use strict";
      document.querySelectorAll('.dropdown-menu a.dropdown-toggle').forEach((elt) => {
        elt.addEventListener('click', (e) => {
          e.stopPropagation();
          e.preventDefault();
          let subMenu = elt.nextElementSibling;
          if (!subMenu.classList.contains("show")) {
            let show_elem = elt.parentElement.parentElement.querySelectorAll(".show")
            for (let elem of show_elem) {
              elem.classList.remove("show")
            }
          }            
          subMenu.classList.toggle('show');             // appliqué au ul
          elt.parentNode.classList.toggle('show');     // appliqué au li parent
     
        });
      });
    });</script>	
    <!-- Fin des scripts -->	
    <div class="container-fluid">
      <nav class="navbar navbar-expand-lg navbar-light bg-light" aria-label="Fifth navbar example">
        <a class="navbar-brand" href="#">brand (Expand at lg)</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsMain" aria-controls="navbarsMain" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
     
        <div class="collapse navbar-collapse" id="navbarsMain">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Les races canines</a>
              <ul class="dropdown-menu">
                <li>
                  <a class="dropdown-item" href="#">Rechercher une race</a>
                </li>
                <li>
                  <a class="dropdown-item" href="#">D'où vient le chien</a>
                </li>
                <li class="dropdown-submenu">
                  <a class="dropdown-item dropdown-toggle" href="#">Les documents de votre chien</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a class="dropdown-item" href="#">Les documents généalogiques</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">La carte d'identification</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">Le passeport européen</a>
                    </li>
                  </ul>
                </li>
                <li class="dropdown-submenu">
                  <a class="dropdown-item dropdown-toggle" href="#">La confirmation</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a class="dropdown-item" href="#">L'examen de confirmation</a>
                    </li>
                  </ul>
                </li>
                <li>
                  <a class="dropdown-item" href="#">Groupes et catégories</a>
                </li>
                <li>
                  <a class="dropdown-item" href="#">Le chien de race</a>
                </li>
                <li>
                  <a class="dropdown-item" href="#">Les races canines françaises</a>
                </li>
              </ul>
            </li>
     
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Votre chien et vous</a>
              <ul class="dropdown-menu">
                <li>
                  <a class="dropdown-item" href="#">Droits de l'animal et devoirs de l’homme</a>
                </li>
                <li class="dropdown-submenu">
                  <a class="dropdown-item dropdown-toggle" href="#">L'adoption</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a class="dropdown-item" href="#">L'adoption d'un chiot</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">Adopter un chien adulte</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">L'arrivée d'un deuxième chien</a>
                    </li>
                  </ul>
                </li>
                <li class="dropdown-submenu">
                  <a class="dropdown-item dropdown-toggle" href="#">La cohabitation</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a class="dropdown-item" href="#">Quand petit et grand chiens cohabitent</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">La cohabitation de mon chien avec d'autres espèces</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">Bébé arrive, comment gérer ?</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">Chien en location, impossible de vous l’interdire</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">Jamais sans mon chien</a>
                    </li>
                  </ul>
                </li>
                <li>
                  <a class="dropdown-item" href="#">
                    <li>
                      <a class="dropdown-item" href="#">La responsabilité du propriétaire d’un chien</a>
                    </li>
                  </a>
                </li>
                <li>
                  <a class="dropdown-item" href="#">Responsabilités légales des maîtres</a>
                </li>
                <li>
                  <a class="dropdown-item" href="#">Quand on s’attache ou pas</a>
                </li>
                <li>
                  <a class="dropdown-item" href="#">Dormir avec son animal</a>
                </li>
                <li>
                  <a class="dropdown-item" href="#">Les chiens distinguent les mots</a>
                </li>
                <li>
                  <a class="dropdown-item" href="#">Les jeux des chiens</a>
                </li>
              </ul>
            </li>
     
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Mon chien</a>
              <ul class="dropdown-menu">
                <li>
                  <a class="dropdown-item" href="#">Les 10 commandements du bon maitre</a>
                </li>
                <li class="dropdown-submenu">
                  <a class="dropdown-item dropdown-toggle" href="#">Mon chien...</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a class="dropdown-item" href="#">fugue</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">n'est pas propre</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">ne m’écoute plus quand il croise un autre chien</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">est-il dominant</a>
                    </li>	
                    <li>
                      <a class="dropdown-item" href="#">se comporte comme un chiot</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">ne revient pas quand je l'appelle</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">s’arrête sans cesse pour renifler</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">ne pense qu'à lui</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">mange n'importe quoi</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">mange mal</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">me parle</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">casse tout à la maison</a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
     
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Education/Comportement</a>
              <ul class="dropdown-menu">
                <li>
                  <a class="dropdown-item" href="#">Psychologie canine et idées reçues</a>
                </li>
                <li class="dropdown-submenu">
                  <a class="dropdown-item dropdown-toggle" href="#">Comportement</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a class="dropdown-item" href="#">La peur de la rue</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">Le chien parfait</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">Le chien médiateur</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">Le chien peureux</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">Le chien phobique</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">Le stress chez le chien</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">Sevrage précoce et trouble du comportement</a>
                    </li>
                  </ul>
                </li>
                <li class="dropdown-submenu">
                  <a class="dropdown-item dropdown-toggle" href="#">Education</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a class="dropdown-item" href="#">Instinct social et apprentissage des chiens</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">Pour qu'il devienne un chien bien dans sa peau</a>
                    </li>
                  </ul>
                </li>
                <li class="dropdown-submenu">
                  <a class="dropdown-item dropdown-toggle" href="#">Age et apprentissage</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a class="dropdown-item" href="#">Lui apprendre la solitude</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">L’apprentissage de la propreté chez le chiot</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">Le chiot construit sa personnalité</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">L'école du chiot</a>
                    </li>
                  </ul>
                </li>
                <li>
                  <a class="dropdown-item" href="#">Psychologie canine et idées reçues</a>
                </li>
                <li>
                  <a class="dropdown-item" href="#">Développement comportemental du chiot</a>
                </li>
                <li>
                  <a class="dropdown-item" href="#">L'école du chiot</a>
                </li>
                <li>
                  <a class="dropdown-item" href="#">Instinct social et apprentissage des chiens</a>
                </li>
                <li>
                  <a class="dropdown-item" href="#">Les chiens n’ont-ils qu’un seul maître</a>
                </li>
              </ul>
            </li>
     
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Alimentation</a>
              <ul class="dropdown-menu">
                <li>
                  <a class="dropdown-item" href="#">Petit récapitulatif sur l'alimentation du chien</a>
                </li>
                <li class="dropdown-submenu">
                  <a class="dropdown-item dropdown-toggle" href="#">En detail</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a class="dropdown-item" href="#">Le format de la gamelle et quantité distribuée</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">La meilleure façon de nourrir votre chien</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">Alimentation ménagère du chien</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">Mode d'emploi de la ration mixte du chien</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">Mon chien peut-il manger chaud</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">Compléments alimentaires</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">Les aliments diététiques pour chien</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">Friandises pour chiens</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">Que doit comporter une étiquette de croquettes</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">La supplémentation dans l'alimentation du chien</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">L'Alimentation du chien de sport</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">L'alimentation du chien de chasse</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">Bien nourrir nos meutes de chiens courants</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">L'alimentation du chien difficile</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">L'alimentation du chien en surpoids</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">Le chien "Gros Mangeur"</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">Conserver les aliments de nos chiens</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">La ration de nourriture quand il fait froid</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">Les troubles digestifs chez le chien</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">Recette de biscuits pour chien</a>
                    </li>
                  </ul>
                </li>
                <li class="dropdown-submenu">
                  <a class="dropdown-item dropdown-toggle" href="#">Ce qu'il faut éviter</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a class="dropdown-item" href="#">Les aliments dangereux pour le chien</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">Les aliments que nos chiens doivent éviter</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">Les erreurs alimentaires classiques</a>
                    </li>
                  </ul>
                </li>
                <li class="dropdown-submenu">
                  <a class="dropdown-item dropdown-toggle" href="#">Les règles de base</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a class="dropdown-item" href="#">Les besoins alimentaires du chien</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">La transition alimentaire du chien</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">Alimentation, croissance et santé</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">Les besoins nutritionnels du chien</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">La saveur des aliments</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">Rôle des nutriments</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">Rôle des acides gras</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">Allergie alimentaire</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">Changer de marque sans grève de la faim</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">Dilatation torsion d'estomac</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">Obésité, une influence génétique complexe</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">Les besoins en eau d'un chien</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">L'alimentation de votre chien</a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
     
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Santé et bien-être</a>
              <ul class="dropdown-menu">
                <li>
                  <a class="dropdown-item" href="#">Guide des bonnes pratiques</a>
                </li>
                <li>
                  <a class="dropdown-item" href="#">Suivi de santé : Dépistage affections</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a class="dropdown-item" href="#">L'offre génomiquede la SCC</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">Le dépistage des tares oculaires</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">Maladies héréditaires</a>
                    </li>
                  </ul>
                </li>
                <li>
                  <a class="dropdown-item" href="#">Maladies héréditaires</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a class="dropdown-item" href="#">L'anomalie de l'oeil du Colley</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">La Dysplasie de la rétine</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">La Cardiomyopathie dilatée</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">La cataracte</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">La cécité nocturne</a>
                    </li>
                  </ul>
                </li>
                <li>
                  <a class="dropdown-item" href="#">Autres affections de votre chien</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a class="dropdown-item" href="#">L'Acidurie</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">L'Adénite sébacée</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">Les anomalies vertébrales</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">Arthrose et activité physique</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">Les boiteries</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">Le cancer de la peau</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">Le cancer de la langue</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">Les chenilles processionnaires</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">Dépigmentation de la truffe</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">Comment gérer son diabète</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">Prostate et hyperplasie bénigne (HBP)</a>
                    </li>
                  </ul>
                </li>
                <li>
                  <a class="dropdown-item" href="#">Service ADN</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a class="dropdown-item" href="#">Les tests génomiques</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">L'offre génomique de la SCC</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">Du nouveau dans les tests</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">ADN, Identification et filiation</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">Tests, Petits rappels</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">Tests, Les bonnes questions</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">Tests, Test de santé ou Test confort</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">Quels tests de confort pour mon chien</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">Identification Génétique</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">Identification, les cas particuliers</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">Formulaires de commande</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">Le stand ADN dans les expositions</a>
                    </li>
                  </ul>
                </li>
                <li>
                  <a class="dropdown-item" href="#">Le syndrome brachycéphale et le BREATH</a>
                </li>
                <li>
                  <a class="dropdown-item" href="#">Lexique des abréviations santé</a>
                </li>
                <li>
                  <a class="dropdown-item" href="#">Vaccination</a>
                </li>
                <li>
                  <a class="dropdown-item" href="#">La Dysplasie du coude</a>
                </li>
                <li>
                  <a class="dropdown-item" href="#">La beauté du poil</a>
                </li>
                <li>
                  <a class="dropdown-item" href="#">Vétérinaires</a>
                </li>	
              </ul>
            </li>
     
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Nos amis</a>
              <ul class="dropdown-menu">
                <li>
                  <a class="dropdown-item" href="#">Refuges SPA</a>
                </li>
                <li>
                  <a class="dropdown-item" href="#">Chiens perdus</a>
                </li> 
                <li>
                  <a class="dropdown-item" href="#">Chiens trouvés</a>
                </li>  
     
                <li>
                  <a class="dropdown-item" href="#">Adopter un chien a la SPA</a>
                </li>
                <li>
                  <a class="dropdown-item" href="#">Petites annonces</a>
                </li>
                <li>
                  <a class="dropdown-item" href="#">Eleveurs recommandés</a>
                </li>	  
              </ul>
    		</li>
     
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Partenariat</a>
              <ul class="dropdown-menu">
                <li>
                  <a class="dropdown-item" href="#">Definition du programme</a>
                </li>
                <li>
                  <a class="dropdown-item" href="#">Pourquoi devenir partenaire</a>
                </li>
                <li>
                  <a class="dropdown-item" href="#">Partenaires</a>
                </li>
                <li>
                  <a class="dropdown-item" href="#">Offre de partenariat</a>
                </li>
                <li>
                  <a class="dropdown-item" href="#">Demande de partenariat</a>
                </li>
                <li>
                  <a class="dropdown-item" href="#">Programme d'essai</a>
                </li>  
                <li>
                  <a class="dropdown-item" href="#">Contact</a>
                </li>
              </ul>
            </li>
          </ul>
          <form method="post" action="">
            <div class="input-group">
              <input class="form-control" type="text" placeholder="Search" aria-label="Search" aria-describedby="button-addon-Search">
              <button class="btn btn-outline-secondary" type="submit" id="button-addon-Search">Go</button>
            </div>
          </form>
        </div>
      </nav>
    </div>
    <img src="Images/communes/fond1.png" alt="" class="image_responsive" width="1575" height="325">
    <!-- Debut Breadcrumb -->	 
     <div class="container-fluid1">
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
              <li class="breadcrumb-item"><a href="../index.html">Accueil</a></li>
              <li class="breadcrumb-item"><a href="#">Les documents de votre chien</a></li>
              <li class="breadcrumb-item active" aria-current="page">L'examen de confirmation</li>
            </ol>
          </nav>
        </div>
    <!-- Fin Breadcrumb -->
    <!-- Debut contenu -->	
     
    <!-- Fin contenu -->		
    <!-- Footer -->
    	<footer class="footer-39201">
          <div class="container">
            <div class="row">
              <div class="col-md mb-4 mb-md-0">
                <ul class="list-unstyled nav-links">
                  <li><a href="#">Men</a></li>
                  <li><a href="#">Women</a></li>
                  <li><a href="#">Children</a></li>
                  <li><a href="#">New Arrivals</a></li>
                  <li><a href="#">Top Brands</a></li>
                  <li><a href="#">Special Offers</a></li>
                </ul>
              </div>
              <div class="col-md mb-4 mb-md-0">
                <ul class="list-unstyled nav-links">
                  <li><a href="#">About us</a></li>
                  <li><a href="#">Clients</a></li>
                  <li><a href="#">Services</a></li>
                  <li><a href="#">Best sellers</a></li>
                  <li><a href="#">Blog</a></li>
                  <li><a href="#">Contact</a></li>
                </ul>
              </div>
              <div class="col-md mb-4 mb-md-0">
                <ul class="list-unstyled nav-links">
                  <li><a href="#">Terms &amp; Conditions</a></li>
                  <li><a href="#">Privacy Policy</a></li>
                  <li><a href="#">Legality</a></li>
                  <li><a href="#">Author License</a></li>
                </ul>
              </div>
              <div class="col-md-4 mb-4 mb-md-0">
                <h3>Souscrire a notre newletter</h3>
                <form action="#" class="subscribe">
                    <input type="text" class="form-control" placeholder="Entrez votre e-mail">
                    <input type="submit" class="btn btn-submit" value="Envoyer">
                  </form>
              </div>
            </div>
    <div class="row align-items-center">
              <div class="col-12">
                <div class="border-top my-5"></div>
              </div>
              <div class="col-md-6 text-md-right">
                <ul class="social list-unstyled">
                  <li><a href="#"><span class="icon-facebook"></span></a></li>
                  <li><a href="#"><span class="icon-twitter"></span></a></li>
                  <li><a href="#"><span class="icon-pinterest"></span></a></li>
                  <li><a href="#"><span class="icon-instagram"></span></a></li>
                  <li><a href="#"><span class="icon-behance"></span></a></li>
                </ul>
              </div>
            </div>
          </div>
        </footer>
    <!-- Fin Footer -->
    </html>

  16. #36
    Inactif  
    Homme Profil pro
    Webmaster
    Inscrit en
    Juin 2021
    Messages
    645
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 57
    Localisation : France, Pas de Calais (Nord Pas de Calais)

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

    Informations forums :
    Inscription : Juin 2021
    Messages : 645
    Points : 1 280
    Points
    1 280
    Par défaut
    Bonjour,

    il te manquait juste le script JS de Bootstrap 5. (en plus du CSS)

    Je t'ai réécrit et réorganisé TOUT LE CODE.
    Car il manquait aussi les balises <head>, <body>, <main>...


    Fais un simple copier-coller :

    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
    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
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    276
    277
    278
    279
    280
    281
    282
    283
    284
    285
    286
    287
    288
    289
    290
    291
    292
    293
    294
    295
    296
    297
    298
    299
    300
    301
    302
    303
    304
    305
    306
    307
    308
    309
    310
    311
    312
    313
    314
    315
    316
    317
    318
    319
    320
    321
    322
    323
    324
    325
    326
    327
    328
    329
    330
    331
    332
    333
    334
    335
    336
    337
    338
    339
    340
    341
    342
    343
    344
    345
    346
    347
    348
    349
    350
    351
    352
    353
    354
    355
    356
    357
    358
    359
    360
    361
    362
    363
    364
    365
    366
    367
    368
    369
    370
    371
    372
    373
    374
    375
    376
    377
    378
    379
    380
    381
    382
    383
    384
    385
    386
    387
    388
    389
    390
    391
    392
    393
    394
    395
    396
    397
    398
    399
    400
    401
    402
    403
    404
    405
    406
    407
    408
    409
    410
    411
    412
    413
    414
    415
    416
    417
    418
    419
    420
    421
    422
    423
    424
    425
    426
    427
    428
    429
    430
    431
    432
    433
    434
    435
    436
    437
    438
    439
    440
    441
    442
    443
    444
    445
    446
    447
    448
    449
    450
    451
    452
    453
    454
    455
    456
    457
    458
    459
    460
    461
    462
    463
    464
    465
    466
    467
    468
    469
    470
    471
    472
    473
    474
    475
    476
    477
    478
    479
    480
    481
    482
    483
    484
    485
    486
    487
    488
    489
    490
    491
    492
    493
    494
    495
    496
    497
    498
    499
    500
    501
    502
    503
    504
    505
    506
    507
    508
    509
    510
    511
    512
    513
    514
    515
    516
    517
    518
    519
    520
    521
    522
    523
    524
    525
    526
    527
    528
    529
    530
    531
    532
    533
    534
    535
    536
    537
    538
    539
    540
    541
    542
    543
    544
    545
    546
    547
    548
    549
    550
    551
    552
    553
    554
    555
    556
    557
    558
    559
    560
    561
    562
    563
    564
    565
    566
    567
    568
    569
    570
    571
    572
    573
    574
    575
    576
    577
    578
    579
    580
    581
    582
    583
    584
    585
    586
    587
    588
    589
    590
    591
    592
    593
    594
    595
    596
    597
    598
    599
    600
    601
    602
    603
    604
    605
    606
    607
    608
    609
    610
    611
    612
    613
    614
    615
    616
    617
    618
    619
    620
    621
    622
    623
    624
    625
    626
    627
    628
    629
    630
    631
    632
    633
    634
    635
    636
    637
    638
    639
    640
    641
    642
    643
    644
    645
    646
    647
    648
    649
    650
    651
    652
    653
    654
    655
    656
    657
    658
    659
    660
    661
    662
    663
    664
    665
    666
    667
    668
    669
    670
    671
    672
    673
    674
    675
    676
    677
    678
    679
    680
    681
    682
    683
    684
    685
    686
    687
    688
    689
    690
    691
    692
    693
    694
    695
    696
    697
    698
    699
    700
    701
    702
    703
    704
    705
    706
    707
    708
    709
    710
    711
    712
    713
    714
    715
    716
    717
    718
    719
    720
    721
    722
    723
    724
    725
    726
    727
    728
    729
    730
    731
    732
    733
    734
    735
    736
    737
    738
    739
    740
    741
    742
    743
    744
    745
    746
    747
    748
    749
    750
    751
    752
    753
    754
    <!DOCTYPE html>
    <html lang="fr">
    <head>
      <meta charset="utf-8">
      <meta name="ROBOTS" content="all">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     
      <!-- titre de la page, description et mots-clés -->
      <title>Guide des Bonnes Pratiques pour le Bien-être</title>
      <meta name="description" content="Guide des Bonnes Pratiques pour le Bien-être de votre chien" />
      <meta name="keywords" content="html,css,bootstrap, multi level menu, submenu, treeview nav menu examples" />  
     
      <!-- chargement des feuilles de style -->
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">	
      <link href="css/Footer.css" rel="stylesheet" type="text/css">
      <link href="css/style.css" rel="stylesheet" type="text/css">	
      <!-- Fin des feuilles de style -->
      <!-- Styles -->
      <style>
        /* ---------------------- */
        /* - BOOTSTRAP 5 - SOUS-MENU - */
        .dropdown-submenu {
          position: relative;
        }
        .dropdown-submenu .dropdown-menu {
          top: 0;
          left: 100%;
          margin-left: .1rem;
          margin-right: .1rem;
        }
        /* --------------------- */
        /* ROTATION des flèches */
        .dropdown-submenu a::after {
          transform: rotate(-90deg);
          position: absolute;
          right: 6px;
          top: .8em;
        }
        /* Niveau 1 */
        li .dropdown-toggle:after {
          transition: all 0.5s;
        }
        li.show > .dropdown-toggle:after {
          transform: rotate(180deg);
        }
        /* sous-Niveaux suivants */
        li li.show > .dropdown-toggle:after {
          transform: rotate(90deg);
        }
        /* --------------------- */
      </style>	
      <!-- Fin des styles -->	
    </head>
    <body>
     
      <header class="container-fluid">
     
        <nav class="navbar navbar-expand-lg navbar-light bg-light" aria-label="Fifth navbar example" style="max-width:100%;">
          <a class="navbar-brand" href="#">(logo)</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsMain" aria-controls="navbarsMain" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
     
          <div class="collapse navbar-collapse" id="navbarsMain">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0 flex-wrap">
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Les races canines</a>
                <ul class="dropdown-menu">
                  <li>
                    <a class="dropdown-item" href="#">Rechercher une race</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">D'où vient le chien</a>
                  </li>
                  <li class="dropdown-submenu">
                    <a class="dropdown-item dropdown-toggle" href="#">Les documents de votre chien</a>
                    <ul class="dropdown-menu">
                      <li>
                        <a class="dropdown-item" href="#">Les documents généalogiques</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">La carte d'identification</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Le passeport européen</a>
                      </li>
                    </ul>
                  </li>
                  <li class="dropdown-submenu">
                    <a class="dropdown-item dropdown-toggle" href="#">La confirmation</a>
                    <ul class="dropdown-menu">
                      <li>
                        <a class="dropdown-item" href="#">L'examen de confirmation</a>
                      </li>
                    </ul>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">Groupes et catégories</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">Le chien de race</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">Les races canines françaises</a>
                  </li>
                </ul>
              </li>
     
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Votre chien et vous</a>
                <ul class="dropdown-menu">
                  <li>
                    <a class="dropdown-item" href="#">Droits de l'animal et devoirs de l’homme</a>
                  </li>
                  <li class="dropdown-submenu">
                    <a class="dropdown-item dropdown-toggle" href="#">L'adoption</a>
                    <ul class="dropdown-menu">
                      <li>
                        <a class="dropdown-item" href="#">L'adoption d'un chiot</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Adopter un chien adulte</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">L'arrivée d'un deuxième chien</a>
                      </li>
                    </ul>
                  </li>
                  <li class="dropdown-submenu">
                    <a class="dropdown-item dropdown-toggle" href="#">La cohabitation</a>
                    <ul class="dropdown-menu">
                      <li>
                        <a class="dropdown-item" href="#">Quand petit et grand chiens cohabitent</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">La cohabitation de mon chien avec d'autres espèces</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Bébé arrive, comment gérer ?</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Chien en location, impossible de vous l’interdire</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Jamais sans mon chien</a>
                      </li>
                    </ul>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">
                      <li>
                        <a class="dropdown-item" href="#">La responsabilité du propriétaire d’un chien</a>
                      </li>
                    </a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">Responsabilités légales des maîtres</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">Quand on s’attache ou pas</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">Dormir avec son animal</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">Les chiens distinguent les mots</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">Les jeux des chiens</a>
                  </li>
                </ul>
              </li>
     
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Mon chien</a>
                <ul class="dropdown-menu">
                  <li>
                    <a class="dropdown-item" href="#">Les 10 commandements du bon maitre</a>
                  </li>
                  <li class="dropdown-submenu">
                    <a class="dropdown-item dropdown-toggle" href="#">Mon chien...</a>
                    <ul class="dropdown-menu">
                      <li>
                        <a class="dropdown-item" href="#">fugue</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">n'est pas propre</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">ne m’écoute plus quand il croise un autre chien</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">est-il dominant</a>
                      </li>	
                      <li>
                        <a class="dropdown-item" href="#">se comporte comme un chiot</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">ne revient pas quand je l'appelle</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">s’arrête sans cesse pour renifler</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">ne pense qu'à lui</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">mange n'importe quoi</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">mange mal</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">me parle</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">casse tout à la maison</a>
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
     
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Education/Comportement</a>
                <ul class="dropdown-menu">
                  <li>
                    <a class="dropdown-item" href="#">Psychologie canine et idées reçues</a>
                  </li>
                  <li class="dropdown-submenu">
                    <a class="dropdown-item dropdown-toggle" href="#">Comportement</a>
                    <ul class="dropdown-menu">
                      <li>
                        <a class="dropdown-item" href="#">La peur de la rue</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Le chien parfait</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Le chien médiateur</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Le chien peureux</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Le chien phobique</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Le stress chez le chien</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Sevrage précoce et trouble du comportement</a>
                      </li>
                    </ul>
                  </li>
                  <li class="dropdown-submenu">
                    <a class="dropdown-item dropdown-toggle" href="#">Education</a>
                    <ul class="dropdown-menu">
                      <li>
                        <a class="dropdown-item" href="#">Instinct social et apprentissage des chiens</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Pour qu'il devienne un chien bien dans sa peau</a>
                      </li>
                    </ul>
                  </li>
                  <li class="dropdown-submenu">
                    <a class="dropdown-item dropdown-toggle" href="#">Age et apprentissage</a>
                    <ul class="dropdown-menu">
                      <li>
                        <a class="dropdown-item" href="#">Lui apprendre la solitude</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">L’apprentissage de la propreté chez le chiot</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Le chiot construit sa personnalité</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">L'école du chiot</a>
                      </li>
                    </ul>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">Psychologie canine et idées reçues</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">Développement comportemental du chiot</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">L'école du chiot</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">Instinct social et apprentissage des chiens</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">Les chiens n’ont-ils qu’un seul maître</a>
                  </li>
                </ul>
              </li>
     
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Alimentation</a>
                <ul class="dropdown-menu">
                  <li>
                    <a class="dropdown-item" href="#">Petit récapitulatif sur l'alimentation du chien</a>
                  </li>
                  <li class="dropdown-submenu">
                    <a class="dropdown-item dropdown-toggle" href="#">En detail</a>
                    <ul class="dropdown-menu">
                      <li>
                        <a class="dropdown-item" href="#">Le format de la gamelle et quantité distribuée</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">La meilleure façon de nourrir votre chien</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Alimentation ménagère du chien</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Mode d'emploi de la ration mixte du chien</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Mon chien peut-il manger chaud</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Compléments alimentaires</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Les aliments diététiques pour chien</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Friandises pour chiens</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Que doit comporter une étiquette de croquettes</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">La supplémentation dans l'alimentation du chien</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">L'Alimentation du chien de sport</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">L'alimentation du chien de chasse</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Bien nourrir nos meutes de chiens courants</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">L'alimentation du chien difficile</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">L'alimentation du chien en surpoids</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Le chien "Gros Mangeur"</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Conserver les aliments de nos chiens</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">La ration de nourriture quand il fait froid</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Les troubles digestifs chez le chien</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Recette de biscuits pour chien</a>
                      </li>
                    </ul>
                  </li>
                  <li class="dropdown-submenu">
                    <a class="dropdown-item dropdown-toggle" href="#">Ce qu'il faut éviter</a>
                    <ul class="dropdown-menu">
                      <li>
                        <a class="dropdown-item" href="#">Les aliments dangereux pour le chien</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Les aliments que nos chiens doivent éviter</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Les erreurs alimentaires classiques</a>
                      </li>
                    </ul>
                  </li>
                  <li class="dropdown-submenu">
                    <a class="dropdown-item dropdown-toggle" href="#">Les règles de base</a>
                    <ul class="dropdown-menu">
                      <li>
                        <a class="dropdown-item" href="#">Les besoins alimentaires du chien</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">La transition alimentaire du chien</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Alimentation, croissance et santé</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Les besoins nutritionnels du chien</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">La saveur des aliments</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Rôle des nutriments</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Rôle des acides gras</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Allergie alimentaire</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Changer de marque sans grève de la faim</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Dilatation torsion d'estomac</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Obésité, une influence génétique complexe</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Les besoins en eau d'un chien</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">L'alimentation de votre chien</a>
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
     
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Santé et bien-être</a>
                <ul class="dropdown-menu">
                  <li>
                    <a class="dropdown-item" href="#">Guide des bonnes pratiques</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">Suivi de santé : Dépistage affections</a>
                    <ul class="dropdown-menu">
                      <li>
                        <a class="dropdown-item" href="#">L'offre génomiquede la SCC</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Le dépistage des tares oculaires</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Maladies héréditaires</a>
                      </li>
                    </ul>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">Maladies héréditaires</a>
                    <ul class="dropdown-menu">
                      <li>
                        <a class="dropdown-item" href="#">L'anomalie de l'oeil du Colley</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">La Dysplasie de la rétine</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">La Cardiomyopathie dilatée</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">La cataracte</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">La cécité nocturne</a>
                      </li>
                    </ul>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">Autres affections de votre chien</a>
                    <ul class="dropdown-menu">
                      <li>
                        <a class="dropdown-item" href="#">L'Acidurie</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">L'Adénite sébacée</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Les anomalies vertébrales</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Arthrose et activité physique</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Les boiteries</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Le cancer de la peau</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Le cancer de la langue</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Les chenilles processionnaires</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Dépigmentation de la truffe</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Comment gérer son diabète</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Prostate et hyperplasie bénigne (HBP)</a>
                      </li>
                    </ul>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">Service ADN</a>
                    <ul class="dropdown-menu">
                      <li>
                        <a class="dropdown-item" href="#">Les tests génomiques</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">L'offre génomique de la SCC</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Du nouveau dans les tests</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">ADN, Identification et filiation</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Tests, Petits rappels</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Tests, Les bonnes questions</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Tests, Test de santé ou Test confort</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Quels tests de confort pour mon chien</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Identification Génétique</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Identification, les cas particuliers</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Formulaires de commande</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Le stand ADN dans les expositions</a>
                      </li>
                    </ul>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">Le syndrome brachycéphale et le BREATH</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">Lexique des abréviations santé</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">Vaccination</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">La Dysplasie du coude</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">La beauté du poil</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">Vétérinaires</a>
                  </li>	
                </ul>
              </li>
     
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Nos amis</a>
                <ul class="dropdown-menu">
                  <li>
                    <a class="dropdown-item" href="#">Refuges SPA</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">Chiens perdus</a>
                  </li> 
                  <li>
                    <a class="dropdown-item" href="#">Chiens trouvés</a>
                  </li>  
     
                  <li>
                    <a class="dropdown-item" href="#">Adopter un chien a la SPA</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">Petites annonces</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">Eleveurs recommandés</a>
                  </li>	  
                </ul>
              </li>
     
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Partenariat</a>
                <ul class="dropdown-menu">
                  <li>
                    <a class="dropdown-item" href="#">Definition du programme</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">Pourquoi devenir partenaire</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">Partenaires</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">Offre de partenariat</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">Demande de partenariat</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">Programme d'essai</a>
                  </li>  
                  <li>
                    <a class="dropdown-item" href="#">Contact</a>
                  </li>
                </ul>
              </li>
            </ul>
            <form method="post" action="">
              <div class="input-group">
                <input class="form-control" type="text" placeholder="Search" aria-label="Search" aria-describedby="button-addon-Search">
                <button class="btn btn-outline-secondary" type="submit" id="button-addon-Search">Go</button>
              </div>
            </form>
          </div>
        </nav>
     
     
      <img src="Images/communes/fond1.png" alt="" class="image_responsive" width="1575" height="325" style="width:100%;max-width:100%;">
      <!-- Debut Breadcrumb -->	 
      <div class="container-fluid">
        <nav aria-label="breadcrumb">
          <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="../index.html">Accueil</a></li>
            <li class="breadcrumb-item"><a href="#">Les documents de votre chien</a></li>
            <li class="breadcrumb-item active" aria-current="page">L'examen de confirmation</li>
          </ol>
        </nav>
      </div>
      <!-- Fin Breadcrumb -->
      </header>
     
      <main class="container-fluid">
      <!-- Debut contenu -->	
     
      <!-- Fin contenu -->		
      </main>
      <!-- Footer -->
      <footer class="container-fluid footer-39201">
          <div class="row">
            <div class="col-md mb-4 mb-md-0">
              <ul class="list-unstyled nav-links">
                <li><a href="#">Men</a></li>
                <li><a href="#">Women</a></li>
                <li><a href="#">Children</a></li>
                <li><a href="#">New Arrivals</a></li>
                <li><a href="#">Top Brands</a></li>
                <li><a href="#">Special Offers</a></li>
              </ul>
            </div>
            <div class="col-md mb-4 mb-md-0">
              <ul class="list-unstyled nav-links">
                <li><a href="#">About us</a></li>
                <li><a href="#">Clients</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Best sellers</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Contact</a></li>
              </ul>
            </div>
            <div class="col-md mb-4 mb-md-0">
              <ul class="list-unstyled nav-links">
                <li><a href="#">Terms &amp; Conditions</a></li>
                <li><a href="#">Privacy Policy</a></li>
                <li><a href="#">Legality</a></li>
                <li><a href="#">Author License</a></li>
              </ul>
            </div>
            <div class="col-md-4 mb-4 mb-md-0">
              <h3>Souscrire a notre newletter</h3>
              <form action="#" class="subscribe">
                <input type="text" class="form-control" placeholder="Entrez votre e-mail">
                <input type="submit" class="btn btn-submit" value="Envoyer">
              </form>
            </div>
          </div>
          <div class="row align-items-center">
            <div class="col-12">
              <div class="border-top my-5"></div>
            </div>
            <div class="col-md-6 text-md-right">
              <ul class="social list-unstyled">
                <li><a href="#"><span class="icon-facebook"></span></a></li>
                <li><a href="#"><span class="icon-twitter"></span></a></li>
                <li><a href="#"><span class="icon-pinterest"></span></a></li>
                <li><a href="#"><span class="icon-instagram"></span></a></li>
                <li><a href="#"><span class="icon-behance"></span></a></li>
              </ul>
            </div>
          </div>
      </footer>
      <!-- Fin Footer -->
     
      <!-- Debut des scripts -->
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
      <script>
    // -------------------------------------------------
    // Bootstrap 5 : Responsive Dropdown Multi Submenu
    // -------------------------------------------------
    window.addEventListener("DOMContentLoaded", (event) => {
      "use strict";
      // navbar : management of Submenus
      // récup. des acteurs
      const elemNav = document.querySelectorAll(".navbar .nav-item");
      const elemToggle = document.querySelectorAll(".navbar .dropdown-menu a.dropdown-toggle");
      // affectation des clics
      elemNav.forEach((nav) => {
        nav.addEventListener('click', (e) => {
          elemToggle.forEach((elem) => {
            elem.parentElement.classList.remove('show');
            elem.nextElementSibling.classList.remove('show');
          });
        })
      });
     // au clic
      elemToggle.forEach((elt) => {
        elt.addEventListener('click', (e) => {
          e.stopPropagation();
          e.preventDefault();
          let subMenu = elt.nextElementSibling;
          if (!subMenu.classList.contains('show')) {
            const dropMenu = elt.closest(".dropdown-menu");
            dropMenu.querySelectorAll('.show').forEach((elem) => {
              elem.classList.remove('show');
            });
          }
          subMenu.classList.toggle('show'); // appliqué au ul
          elt.parentNode.classList.toggle('show'); // appliqué au li parent
        });
      });
    });
    // -------------------------------------------------
      </script>	
      <!-- Fin des scripts -->	
     
    </body>
    </html>

    REMARQUE :
    Pour éviter que les sous-menus "sortent" de la fenêtre, on peut les décaler sur leur parent :
    remplacer :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    .dropdown-submenu .dropdown-menu {
      top: 0;
      left: 100%;
      margin-left: .1rem;
      margin-right: .1rem;
    }
    par :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    .dropdown-submenu .dropdown-menu {
      top: 100%;
      left: 50%;
      margin-left: .1rem;
      margin-right: .1rem;
    }

    [EDIT] J'ai repris le code JS de Nosmoking

  17. #37
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    Citation Envoyé par jreaux62
    Le menu n'est pas censé être une liste exhaustive des "articles" !...
    Au contraire, il vaut mieux :
    • avoir un menu SIMPLE et CLAIR (rubriques principales)
    • REGROUPER les articles d'une même rubrique sur LA MÊME PAGE (cela augmente le contenu, et améliore le référencement de LA PAGE)
    • éventuellement, sur CES PAGES, avoir un "menu secondaire" reprenant les titres des articles de cette page (avec des liens/ancres vers chaque article)

Discussions similaires

  1. Menu horizontal multi level, modif de script
    Par WeDgEMasTeR dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 22/12/2007, 15h53
  2. [Tableaux] recherche dans un tableau multi dimension
    Par kagura dans le forum Langage
    Réponses: 1
    Dernier message: 18/07/2007, 15h27
  3. Multi sous-menu
    Par marcel72 dans le forum AWT/Swing
    Réponses: 5
    Dernier message: 13/03/2006, 15h12
  4. Réponses: 15
    Dernier message: 12/08/2005, 16h06

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