简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Pastikan dropdown sentiasa muncul di atas induknya, position: relative
P粉738346380
P粉738346380 2024-04-01 18:43:16
0
1
319

Saya cuba mencapai sesuatu seperti di bawah.

  • Bekas mengandungi satu set lungsur turun yang diaktifkan apabila diklik dan lungsur turun terletak di atas setiap ibu bapa.

Masalah yang dihadapi:

Masalah yang saya hadapi sekarang ialah menu lungsur turun disembunyikan di dalam bekas dan bukannya muncul di atas peringkat induk.

Apa yang saya cuba:

Saya mencuba position:absolute dan ia berfungsi hebat untuk meletakkan senarai di atas setiap ibu bapa.

Sebaliknya, lungsur turun yang melimpah akan mengekalkan kedudukannya pada lokasi yang ditetapkan dan bukannya mengikut label lungsur turunnya.

Oleh itu, jawatan:saudara diperlukan.

Bolehkah seseorang memberikan sedikit penjelasan tentang perkara ini?

Terima kasih banyak atas bantuan anda.

http://jsfiddle.net/6r94bpof/

    html,body{
    margin: 0;
    padding: 0;
    overflow: hidden;
    }
    
    .land{
        display: grid;
        grid-template-rows: 1fr 8fr;
        height: 100vh;
    
    }
    
    .mainmenu{
        border: solid 2px grey;
        width: 100%;
        height: 80px;
        display: flex;
        overflow: hidden;
        position: relative;
    }
    
    .left{
        width: 50%;
        max-width: 50%;
    }
    
    .left-selection{
        display: flex;
        overflow-y: hidden;
        overflow-x: scroll;
    }
    
    .right{
        width: 50%;
        max-width: 50%;
    }
    
    .right-selection{
        display: flex;
        overflow-y: hidden;
        overflow-x: scroll;
    }
    
    .ddgroup{
        display: flex;
    }
    
    .ddlist{
        position: relative;
        display: none;
        list-style-type: none;
    }

    input[type=checkbox]:checked ~ .ddlist{
        display: block;
        position: relative;
    }
    
 <html>
    <body>
    <div class="land">
      <div class="mainmenu">
          <div class="left">
              <div class="left-selection">
                  <div class="ddgroup">
                      <ul class="ddmenu">
                          <input type="checkbox" id="ctrl"/>
                          <label class="btn" for="ctrl">Click me!</label> 
                          <ul class="ddlist">
                              <li><a href="#">Sub-1</a></li>
                              <li><a href="#">Sub-2</a></li>
                              <li><a href="#">Sub-3</a></li>
                          </ul> 
                      </ul>
                      <ul class="ddmenu">
                          <input type="checkbox" id="ctrl"/>
                          <label class="btn" for="ctrl">Click me!</label>          
                          <ul class="ddlist">
                              <li><a href="#">Sub-1</a></li>
                              <li><a href="#">Sub-2</a></li>
                              <li><a href="#">Sub-3</a></li>
                          </ul> 
                      </ul>
                      <ul class="ddmenu">
                          <input type="checkbox" id="ctrl"/>
                          <label class="btn" for="ctrl">Click me!</label>          
                          <ul class="ddlist">
                              <li><a href="#">Sub-1</a></li>
                              <li><a href="#">Sub-2</a></li>
                              <li><a href="#">Sub-3</a></li>
                          </ul> 
                      </ul>
                      <ul class="ddmenu">
                          <input type="checkbox" id="ctrl"/>
                          <label class="btn" for="ctrl">Click me!</label>          
                          <ul class="ddlist">
                              <li><a href="#">Sub-1</a></li>
                              <li><a href="#">Sub-2</a></li>
                              <li><a href="#">Sub-3</a></li>
                          </ul> 
                      </ul>
                      <ul class="ddmenu">
                          <input type="checkbox" id="ctrl"/>
                          <label class="btn" for="ctrl">Click me!</label>          
                          <ul class="ddlist">
                              <li><a href="#">Sub-1</a></li>
                              <li><a href="#">Sub-2</a></li>
                              <li><a href="#">Sub-3</a></li>
                          </ul> 
                      </ul>
                      <ul class="ddmenu">
                          <input type="checkbox" id="ctrl"/>
                          <label class="btn" for="ctrl">Click me!</label>          
                          <ul class="ddlist">
                              <li><a href="#">Sub-1</a></li>
                              <li><a href="#">Sub-2</a></li>
                              <li><a href="#">Sub-3</a></li>
                          </ul> 
                      </ul>
                      <ul class="ddmenu">
                          <input type="checkbox" id="ctrl"/>
                          <label class="btn" for="ctrl">Click me!</label>          
                          <ul class="ddlist">
                              <li><a href="#">Sub-1</a></li>
                              <li><a href="#">Sub-2</a></li>
                              <li><a href="#">Sub-3</a></li>
                          </ul> 
                      </ul>
                      <ul class="ddmenu">
                          <input type="checkbox" id="ctrl"/>
                          <label class="btn" for="ctrl">Click me!</label>          
                          <ul class="ddlist">
                              <li><a href="#">Sub-1</a></li>
                              <li><a href="#">Sub-2</a></li>
                              <li><a href="#">Sub-3</a></li>
                          </ul> 
                      </ul>
                      <ul class="ddmenu">
                          <input type="checkbox" id="ctrl"/>
                          <label class="btn" for="ctrl">Click me!</label>          
                          <ul class="ddlist">
                              <li><a href="#">Sub-1</a></li>
                              <li><a href="#">Sub-2</a></li>
                              <li><a href="#">Sub-3</a></li>
                          </ul> 
                      </ul>
                  </div>   
              </div>
          </div>
          <div class="right">
              <div class="right-selection">
                <h1>Test<h1/>
                <h1>Test<h1/>
              </div>
          </div>
      </div>
    </div>
    </body>
    </html>

P粉738346380
P粉738346380

membalas semua(1)
P粉896751037
P粉8967510372024-04-02 09:24:58 Tingkat 1

Saya tidak dapat menyalin html dan css anda jadi saya mencipta sendiri, jika ia tidak sepadan dengan pertanyaan anda sila beritahu saya dan saya akan melaraskannya

 *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
}


input{


display:none;
}
ul, li{
    list-style: none;
    
}
ul{
    display: flex;
    justify-content: space-around;
    gap:1rem;
    padding: 1rem ;
}
li{
    position: relative;
    
}
.dropdown-content {
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    margin-top: 10px;
    display: none;
}
.dropdown-content > *{
display: block;
text-align: center;
text-decoration: none;
color: #38dce5;
margin-top: 0.3rem;
padding: 0.3rem;


}

input:checked ~ .dropdown-content {
    display: block;
}
 
Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！