Schlechte Ausrichtung beim Ein- und Ausblenden von Divs im Schwebeflug

Question

Im Moment habe ich eine Schaltfläche mit einem Dropdown-Menü, um zwei Schaltflächen darunter anzuzeigen. Mein Problem ist, dass es mit der Ausrichtung der anderen Tasten kollidiert, wenn das Drop-Down passiert.

Eine Sache zu beachten ist, dass sie "Platz schaffen" müssen für die Dropdown-Menüs, wenn der Bildschirm mobil wird (weil die Tasten übereinander gestapelt sind).

Jetzt funktioniert es, wie ich im Mobile mag und ich suche nach einer Lösung für den Desktop, oder möglicherweise eine neue Lösung, die beide funktioniert.

Meine eine Wunschliste wäre ein Übergang für das Dropdown, aber meine aktuelle Lösung verwendet display: none aus zwei Gründen: weil die Schaltflächen transparent sind, kann ich nichts hinter ihnen verstecken, und in mobilen, ich kann den Raum darunter nicht bewahren, weil sie aufeinander gestapelt sind.

zackpyle.com/photography

<style> 
.wrapcenter{ 
    text-align:center; 
} 
.homebox{ 
    display:inline-block; 
    position:relative; 
    margin:25px; 
    border:1px; 
    border-style:solid; 
    border-color:white; 
    width:250px; 
    height:140px; 
    color:white; 
    background:rgba(255,255,255,.25); 
    transition: all 0.25s ease-in-out; 
} 
h4.homeboxtext{ 
    position: absolute; 
    top: 27%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
} 

.homebox:hover { 
background:rgba(255,255,255,.4) 
    } 

h4{ 
    font-size: 25px; 
    text-transform: none; 
    font-family: "Abel"; 
    line-height: 1.2em; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
    font-weight: 400; 
    font-style: normal; 
} 
h5{ 
    font-size: 18px; 
    text-transform: none; 
    font-family: "Abel"; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
    font-weight: 400; 
    font-style: normal; 
    transform: translate(0%, -70%); 
} 
.submenu { 
    display: none; 
    margin:25px; 
    border:1px; 
    border-style:solid; 
    border-color:white; 
    width:250px; 
    height:50px; 
    color:white; 
    background:rgba(255,255,255,.25); 
    transition: all 0.25s ease-in-out; 
    z-index: 999; 
} 
.div_one:hover .submenu { 
    display: block; 
} 
.homeboxphotography_wrapper { 
    display:inline-block; 
    z-index: 1; 
} 
</style> 


    <div class="container wrapcenter"> 
    <ul class="menu"> 
     <li> 
      <a href="/professional-gallery"> 
       <h5>Professional</h5> 
      </a> 
     </li> 
     <li> 
      <a href="/fun-gallery"> 
       <h5>For Fun</h5> 
      </a> 
     </li> 
     <li> 
      <div id="menu1"> 
       <h5>Travel</h5> 
      </div> 
      <ul class="submenu"> 
       <li> 
        <a href="/europe-gallery">Mainland Europe</a> 
       </li> 
       <li> 
        <a href="/iceland-gallery">Iceland</a> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</div> 

Vielen Dank im Voraus!

Zack

Answer 1

Wechsel von Inline-Block zu Float.

.homeboxphotography_wrapper { 
float: left; 
} 

Am besten fügen Sie Medienabfragen hinzu, um diese Elemente für Tablet-Geräte zu stapeln.

Eine andere Methode wäre absolute Position auf den Kindelementen zu verwenden, stellen Sie sicher, dass sie sich in einem Container befinden.