html - 悬停时隐藏和取消隐藏 Div 时对齐不正确

Question

现在我有一个按钮，它有一个下拉菜单以显示其下方的两个按钮。我的问题是当下拉菜单发生时它会扰乱其他按钮的对齐方式。

需要考虑的一件事是，当屏幕转到移动设备时，他们需要为下拉菜单“腾出空间”(因为按钮彼此堆叠)。

所以现在，它在移动设备上的工作方式与我喜欢的方式相同，我正在寻找适用于桌面设备的解决方案，或者可能是让两者都能正常工作的新解决方案。

我的一个愿望 list 元素是为下拉菜单设置一个过渡，但我目前的解决方案使用 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>

提前致谢!

扎克

Answer 1

从内联 block 更改为 float 。

.homeboxphotography_wrapper {
float: left;
}

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

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