[Résolu] Menu déroulant débordant dans une balise div

Bonjour à toutes et tous.

Qui pourrait m'aider sur le problème suivant?

J'ai un menu déroulant horizontal contenu dans une balise div. Lorsque je réduis la largeur de la fenêtre du navigateur, les différents composants du menu se mettent à la verticale, l'un au dessous de l'autre, ce qui est très bien.

L'ennui, c'est qu'en faisant cela, le menu déborde de la div. Ce que je souhaite, c'est que la hauteur de la div suive le menu et s'ajuste automatiquement. C'est le cas si j'y insère des lignes de texte

Comment puis-je faire cela?
Merci d'avance pour votre aide.

Ci dessous: le code du menu, le css s'y rapportant, et le ccs de la div le contenant

le menu:

<div class="conteneur2">
<div id="menu">	
	<dl>			
		<dt onClick="javascript:montre('smenu2');">La Vigne</dt>
			<dd id="smenu2">
				<ul>
					<li><a href="#">Historique</a></li>
					<li><a href="#">Caractéristiques</a></li>
					<li><a href="#">Les produits</a></li>
				</ul>
			</dd>
	</dl>	
	
	<dl>	
		<dt onClick="javascript:montre('smenu3');">La Confrérie</dt>
			<dd id="smenu3">
				<ul>
				  <li><a href="#">Le mot du président</a></li>
				  <li><a href="#">Le livre anniversaire</a></li>
				</ul>
			</dd>
</div>
</div>

le css du menu:

body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}

dl, dt, dd, ul, li {
margin: 0;    			
padding: 0;  			
list-style-type: none;
}

#menu {
position: absolute;
top: 0;  				
left: 0;				
z-index:100;
width: 100%;
}

#menu dl {
float: left;  			
width: 20%; 			
min-width:100px;
margin: 0 0px;  		
}

#menu dt {
cursor: pointer;   		
text-align: center;  	
font-weight: bold;
color:blue;        		
background: #ccc;  		
border: 1px solid red;
}

#menu dd {
border: 1px solid gray; 
}
#menu li {
text-align: center;		
background: #fff;  		
}

#menu li a, #menu dt a {
color: #000;  			
display: block;
height: 100%;
border: 0 none;
}

#menu li a:hover, #menu dt a:hover {
background: orange;    	
}

le css de la div qui le contient

.conteneur2 {
position:absolute;
margin-left:0%;
margin-top:2%;
z-index:2;
width: 100%;
border-width:thin; 
border-style:none; 
border-color:#FFFF00; 
background-color:#CCCC99;
}

Merci d'avance

Ok ça marche
Merci Jean Pierre
Modifié par phrq (28 Feb 2020 - 12:01)