Question

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

要考虑的一件事是，当屏幕进入移动状态时，他们需要为下拉菜单“腾出空间”（因为按钮叠加在一起）。

现在，它在移动设备中的运行方式非常有用，我正在寻找桌面解决方案，或者可能是一种新的解决方案。

我的一个愿望清单项目将是下拉列表的转换，但我当前的解决方案使用display：none有两个原因：因为按钮是透明的，所以我无法隐藏它们背后的东西，而在移动设备中，我可以不要在它下面保留空间，因为它们是相互堆叠的。

<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

从内联块更改为浮动。

.homeboxphotography_wrapper {
float: left;
}

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

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

在悬停时隐藏和取消隐藏Div的错误对齐

1 个答案: