Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Stellen Sie sicher, dass das Dropdown-Menü immer über dem übergeordneten Element angezeigt wird, Position: relativ
P粉738346380
P粉738346380 2024-04-01 18:43:16
0
1
423

Ich versuche, etwas wie das Folgende zu erreichen.

  • Container enthält eine Reihe von Dropdowns, die beim Klicken aktiviert werden, und die Dropdowns befinden sich über jedem übergeordneten Element.

Probleme:

Das Problem, das ich jetzt habe, ist, dass das Dropdown-Menü im Container versteckt ist, anstatt oben auf der übergeordneten Ebene zu erscheinen.

Was ich versucht habe:

Ich habe position:absolute ausprobiert und es funktioniert hervorragend, um die Liste über jedes übergeordnete Element zu legen.

Ein übergelaufenes Dropdown-Menü hingegen behält seine Position an der festgelegten Position, anstatt seinem Dropdown-Label zu folgen.

Daher ist position:relative erforderlich.

Kann jemand dazu etwas erklären?

Vielen Dank für Ihre Hilfe.

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

Antworte allen(1)
P粉896751037
P粉8967510372024-04-02 09:24:58 1 Etage

我无法复制你的 html 和 css，所以我创建了自己的 html 和 css，如果它与你的查询不匹配，请告诉我，我会调整

 *{
    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;
}
 
Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage