Jadikan menu lungsur turun berbilang peringkat
P粉107772015
P粉107772015 2024-01-10 18:02:08
0
2
459

Saya mempunyai menu lungsur seperti ini:

.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>
Tetapi menu peringkat kedua tidak berfungsi (tekan "Run Code Snippet" untuk melihatnya). Saya memerlukannya untuk muncul di sebelah kanan tahap pertama, dan lebar setiap tahap mestilah anjal (naik dan berkurang secara automatik berdasarkan kandungan). Selain itu, lebar butang akar tidak boleh terikat pada lebar tahap pertama. Sebaik-baiknya mana-mana tahap harus mempunyai gaya biasa, tetapi tidak mengapa kerana saya tidak mempunyai berpuluh-puluh tahap. Adakah terdapat sebarang penyelesaian tanpa menulis semula semua kod?

P粉107772015
P粉107772015

membalas semua(2)
P粉235202573

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>
P粉187160883

Anda boleh melakukan perkara berikut:

Dari .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>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan