隐藏和取消隐藏悬停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; 
} 

最好添加媒体查询以堆叠平板设备的这些元素。

另一种方法是在子元素上使用绝对位置，确保它们位于容器内。