Rendre le menu déroulant à plusieurs niveaux

Question

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 ?

Answer 1

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>

Answer 2

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>