Mise en place d'une navbar multi level

Version imprimable

Voir 40 message(s) de cette discussion en une page

13/11/2021, 22h28
jreaux62

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.
13/11/2021, 23h38
SosChiensDordogne

Bonsoir,
Desole je n'ai plus acces au autres message, desole encore, donc suis perdu.
Bonne soiree

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:

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:

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

14/11/2021, 05h54
SosChiensDordogne

Re
Merci pour ta reponse
comment cela un menu secondaire?

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:

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

14/11/2021, 22h13
jreaux62

Citation:

Envoyé par SosChiensDordogne

je voudrais juste comprendre l'architecture.

INDENTE LE CODE !

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:

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

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:

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:

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

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:

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

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:

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

17/11/2021, 13h25
jreaux62
Bonjour,

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

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... :
- Bootstrap 5 navbar mega menu dropdown code (démo)

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:

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

19/11/2021, 17h17
jreaux62
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)

C'EST BON.

J'ai le MENU de tes rêves ;)

https://codepen.io/jreaux62/pen/oNeVqGX

Code:

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:

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:

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 ;)

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:

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>

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:

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:

1
2
3
4
5
6
.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-left: .1rem;
  margin-right: .1rem;
}

par :

Code:

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 ;)

https://www.developpez.com/template/kit/kitwarning.png

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)

Voir 40 message(s) de cette discussion en une page