J'ai un menu déroulant comme celui-ci :
.dropdown
{
display: inline-block;
position: relative;
}
.dropdown button > a
{
display: block;
color: #000000;
text-decoration: none;
}
.dropdown-content
{
display: none;
position: absolute;
width: auto;
overflow: auto;
box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.4);
}
.dropdown:hover .dropdown-content
{
display: block;
}
.dropdown-content a
{
display: block;
color: #000000;
background-color: #e9e9ed;
padding: 5px;
text-decoration: none;
}
.dropdown-content a:hover
{
color: #FFFFFF;
background-color: #0080bf;
}
<DIV class="dropdown"><BUTTON>Menu</BUTTON><DIV class="dropdown-content">
<A href="/1.php">Option 1</A>
<A href="/2.php">Option 2</A>
<A href="/3.php">Option 3</A>
<DIV class="dropdown"><BUTTON><A href="/4.php">Option 4</A></BUTTON><DIV class="dropdown-content">
<A href="/4-1.php">Option 4-1</A>
<A href="/4-2.php">Option 4-2</A>
<A href="/4-3.php">Option 4-3</A>
</DIV></DIV>
</DIV></DIV>
Mais le menu de deuxième niveau ne fonctionne pas (appuyez sur "Exécuter l'extrait de code" pour le voir). J'ai besoin qu'il apparaisse sur le côté droit du premier niveau, et la largeur de chaque niveau doit être élastique (augmenter et diminuer automatiquement en fonction du contenu). De plus, la largeur du bouton racine ne doit pas être liée à la largeur du premier niveau. Idéalement, n'importe quel niveau devrait avoir un style commun, mais cela n'a pas d'importance puisque je n'ai pas des dizaines de niveaux. Existe-t-il une solution sans réécrire tout le code ? 
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
function showNestedDropdown() { var firstDropdown = document.getElementById("firstDropdown"); var nestedDropdownContainer = document.getElementById("nestedDropdownContainer"); if (firstDropdown.value !== "") { nestedDropdownContainer.style.display = "block"; } else { nestedDropdownContainer.style.display = "none"; } }<select id="firstDropdown" onchange="showNestedDropdown()"> <option value="">Select an option</option> <option value="option1">Option 1</option> <option value="option2">Option 2</option> </select> <div id="nestedDropdownContainer" style="display: none;"> <select id="nestedDropdown"> <option value="">Select a nested option</option> <option value="nested1">Nested Option 1</option> <option value="nested2">Nested Option 2</option> </select> </div>Vous pouvez faire ce qui suit :
De
.dropdown-content中删除overflow: auto;，以便溢出的子级别可见。在.dropdown:hover .dropdown-content行添加>选择器，以便直接子项将在悬停时显示。最后一件事是添加子级别样式以将其显示在右上角.dropdown-content .dropdown-content { left: 100%;顶部：0； }body { background-color: antiquewhite; } .dropdown { display: inline-block; position: relative; width: 100%; } .dropdown-content { display: none; position: absolute; width: auto; box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.4); white-space: nowrap; } .dropdown:hover > .dropdown-content { display: block; } .dropdown-content a { display: block; color: #000000; background-color: #e9e9ed; padding: 5px; text-decoration: none; } .dropdown-content a:hover { color: #FFFFFF; background-color: #0080bf; } /* To display second level on right*/ .dropdown-content .dropdown-content { left: 100%; top: 0; }<div class="dropdown"> <div class="menu">Menu</div> <div class="dropdown-content"> <a href="/1.php">Option 1 Longer</a> <div class="dropdown"> <div class="menu"> <a href="/4.php">Option</a> </div> <div class="dropdown-content"> <a href="/4-1.php">Option 4-1</a> <a href="/4-2.php">Option 4-2</a> <a href="/4-3.php">Option 4-3</a> </div> </div> </div> </div>