如何在Flex容器内创建hover时显示的CSS按钮？

数据老陈

2026-8-4

问题描述

我尝试在Flex容器中添加按钮，制作一个页面中部的下拉菜单。需要四个能填满Flex容器空间、hover时显示的按钮。目前hover动作可触发，但按钮显示异常且位置偏移。本质上，我需要一个盒子，当鼠标悬停时分裂为四个可点击的子盒子，且全部包含在原盒子内。

当前代码

CSS 代码

.nav-box-container {
  width: 220px;
  margin: 15px 7px 0px 7px;
  flex-grow: 1;
}

@media (max-width: 767px) {
  .nav-box-container {
    width: auto;
  }


  .nav-box-citations {
    color: #282828;
    background-color: #fff;
    outline: 3px solid #bbb;
    margin: 0px;
    padding: 25px 25px 30px 25px;
    padding-right: 19px;
    min-height: 160px;
    font-size: 17px;
    font-weight: 500;
    height: 100%;
  }

  .nav-box-citations-buttons {
    display: none;
    width: 100%;
    background-color: #fff;
    outline: #282828 solid;
    text-decoration: none;
  }

  .nav-box-citations:hover,
  .nav-box-citations:focus+.nav-box-citations-buttons,
  .nav-box-citations-buttons:hover {
    display: inline;
  }
}

HTML 代码

<div class="nav-box-container">
  <div class="nav-box-citations">
    <h3 class="nav-box-title">Citation Guides</h3>
    <p class="nav-box-desc">Get help on formatting citations and bibliographies.</p>
    <div class="btn-grp">
      <button type="button-group" class=nav-box-citations-buttons><a href="#">APA</a></button>
      <button type="button-group" class=nav-box-citations-buttons><a href="#">MLA</a></button>
      <button type="button-group" class=nav-box-citations-buttons><a href="#">AMA</a></button>
      <button type="button-group" class=nav-box-citations-buttons><a href="#">Chicago</a></button>
    </div>
  </div>
</div>

当前效果