ドロップダウン メニューを複数レベルにする

Question

次のようなドロップダウン メニューがあります:

リーリー リーリー ただし、第 2 レベルのメニューは機能しません (「コード スニペットの実行」を押すと表示されます)。最初のレベルの右側に表示する必要があり、各レベルの幅は伸縮可能である必要があります (コンテンツに基づいて自動的に増減します)。さらに、ルート ボタンの幅を最初のレベルの幅にバインドしてはなりません。理想的には、どのレベルにも共通のスタイルがあるべきですが、私は数十のレベルを持っているわけではないので、それは問題ではありません。コードをすべて書き直さずに解決策はありますか?

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

次のことができます:

オーバーフローしたサブレベルが表示されるように、.dropdown-content から overflow: auto; を削除します。 .dropdown:hover .dropdown-content 行に # セレクターを追加して、ホバー上に直接の子が表示されるようにします。最後に、右上隅に表示するサブレベル スタイルを追加します .dropdown-content .dropdown-content { left: 100%; top: 0; }

リーリー リーリー