隱藏和取消隱藏懸停Div時的對齊方式不正確

Question

現在我有一個有下拉按鈕的按鈕，可以顯示它下面的兩個按鈕。我的問題是當下拉發生時，它與其他按鈕的對齊混亂。

需要考慮的一件事是，當屏幕進入移動設備時（因爲按鈕堆疊在彼此之上），他們需要爲下拉菜單「騰出空間」。

所以現在，它適用於我喜歡的移動設備，我正在尋找桌面解決方案，或者可能使兩種解決方案都能正常工作。

我的一個願望清單項目將會有一個下拉過渡，但我目前的解決方案使用display：none有兩個原因：因爲按鈕是透明的，所以我不能隱藏它們後面的東西，而在移動中，我不能保留下面的空間，因爲它們堆疊在一起。

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> 

提前感謝！

Zack

Answer 1

從內嵌塊更改爲浮動。

.homeboxphotography_wrapper { 
float: left; 
} 

最好添加媒體查詢以堆疊平板設備的這些元素。

另一種方法是在子元素上使用絕對位置，確保它們位於容器內。