javascript - 使下拉菜单项始终与其父项具有相同的大小？ ( Bootstrap 和 CSS)

Question

我有一个带下拉菜单的导航栏(悬停时)。我希望下拉菜单项的大小与父菜单项的大小相同。

这是一张图片:

所以我现在希望“一个”和“两个”的大小与“这是一个下拉列表”完全相同(至少在宽度方面)。现在它们有点太大了。当我调整窗口大小时，父元素(“这是一个下拉菜单”)会改变大小，然后“一”和“二”应该相应地调整大小，就像原来一样。

代码

我有一个包含不同元素的导航栏，其基本结构如下:

<div class="container-fluid nopadding navbar"> <!-- NAVBAR -->
  <div class="row">

    <div class="container-fluid col-xs-12 col-sm-12 col-md-10"> <!-- MENU -->
      <div class="row">

        <div class="dropdown col-xs-12 col-sm-2">
          <div class="container-fluid">
            <div class="row">
              <button class="dropbtn col-xs-12">This is a dropdown</button>
              <div class="dropdown-content col-xs-12 nopadding">
                <a href="#">One</a>
                <a href="#">Two</a>
              </div>
            </div>
          </div>
        </div>
...more navbar elements follow here

    </div>
   </div>

  </div>
</div>

这是一些 CSS:

/* Dropdown Button */
.dropbtn {
    background-color: #F6F8FB;
    border: none;
    cursor: pointer;
    font-family: AlegreyaSansSC-Light;
    font-size: 16px;
    color: #637F92;
    letter-spacing: 0.52px;
    height: 81px;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #F6F8FB;

  z-index: 1;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
  background: rgb(221, 232, 241); /* Fallback for older browsers without RGBA-support */
  background: rgba(221, 232, 241, 0.95);
}

/* Links inside the dropdown */
.dropdown-content a {
  padding: 30px;
  text-align: center;
  text-decoration: none;
  display: block;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
    top: 81px;
    position: absolute;
}

为了确定，我在这里包含了太多内容。

Answer 1

您应该从 .dropdown-content a 元素中删除 padding:

.dropdown-content a {
  /*padding: 30px;*/
  text-align: center;
  text-decoration: none;
  display: block;
}