简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Assurez-vous que la liste déroulante apparaît toujours au-dessus de son parent, position : relative
P粉738346380
P粉738346380 2024-04-01 18:43:16
0
1
391

J'essaie de réaliser quelque chose comme ci-dessous.

  • Container contient un ensemble de listes déroulantes qui s'activent lorsque vous cliquez dessus et les listes déroulantes sont situées au-dessus de chaque parent.

Problèmes rencontrés :

Le problème que j'ai maintenant est que le menu déroulant est caché à l'intérieur du conteneur au lieu d'apparaître en haut du niveau parent.

Ce que j'ai essayé :

J'ai essayé position:absolute et cela fonctionne très bien pour mettre la liste en haut de chaque parent.

Une liste déroulante débordée, en revanche, conservera sa position à son emplacement défini au lieu de suivre son étiquette de liste déroulante.

Par conséquent, position:relative est requis.

Quelqu'un peut-il apporter des éclaircissements à ce sujet ?

Merci beaucoup pour votre aide.

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

répondre à tous(1)
P粉896751037
P粉8967510372024-04-02 09:24:58 1 plancher

Je n'ai pas pu copier votre code HTML et CSS, j'ai donc créé le mien. Si cela ne correspond pas à votre requête, faites-le moi savoir et je l'ajusterai

 *{
    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;
}
 
Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！