增加div顶部的高度

Question

我有像菜单一样的菜单，我希望在悬停时增加div的顶部高度或填充。现在我的div范围在悬停的底部。我想在悬停时增加顶部的高度

#sub_menu {
  margin: 0 auto;
  max-width: 960px;
  width: 100%;
}

.categoryMobileMenu {
  display: none;
}

.categoryMenu {
  display: block;
}

.categoryMenu {
  background-color: #663399;
  min-height: 110px;
  font size: 18px;
  color: #fff;
  text-align: center;
  padding-top: 2%;
}

.categoryMenu:hover {
  min-height: 120px;
  background-color: #552882;
}

#sub_menu {
  position: absolute;
  left: 0;
  right: 0;
  /* bottom: 0;*/
  top: 83.4vh;
}

#sub_menu .categoryMenu a.active .menu-hover-image {
  display: block !important;
}

#sub_menu .categoryMenu a.active .menu-image {
  display: none !important;
}

#sub_menu .categoryMobileMenu a.active .menu-hover-image {
  display: block !important;
}

#sub_menu .categoryMobileMenu a.active .menu-image {
  display: none !important;
}

.categoryMenu li {
  list-style-type: none;
}

.categoryMenu .menu-hover-image,
.categoryMobileMenu .menu-hover-image {
  display: none;
}

.categoryMenu a:active,
.categoryMobileMenu a:active {
  text-decoration: none !important;
  color: #fff !important;
}

.categoryMenu a {
  color: #fff;
  font size: 12px;
}

.categoryMobileMenu li {
  list-style-type: none;
  display: flex;
  align-items: center;
}

.categoryMobileMenu p {
  display: inline;
}

.categoryMobileMenu .menu-image {
  display: inline;
}

.categoryMobileMenu .field-content a {
  display: inline;
}

.categoryMenu {
  border-left: 1px solid red;
}

<div id="sub_menu">
  <div class="categoryMenu col-sm-4 col-md-4">
    <a href="#">
      <li>
        <div class="menu-image">Hello</div>

        <p>Heading</p>
      </li>
    </a>
  </div>
  <div class="categoryMenu col-sm-4 col-md-4">
    <a href="#">
      <li>
        <div class="menu-image">Hello</div>

        <p>Heading</p>
      </li>
    </a>
  </div>
  <div class="categoryMenu col-sm-4 col-md-4">
    <a href="#">
      <li>
        <div class="menu-image">Hello</div>

        <p>Heading</p>
      </li>
    </a>
  </div>
</div>

Answer 1

您可以在padding-top内设置categoryMenu:hover，如下所示：

.categoryMenu:hover {
  min-height: 120px;
  background-color: #552882;
  padding-top: 4%;
}

整个代码：

#sub_menu {
  margin: 0 auto;
  max-width: 960px;
  width: 100%;
}

.categoryMobileMenu {
  display: none;
}

.categoryMenu {
  display: block;
}

.categoryMenu {
  background-color: #663399;
  min-height: 110px;
  font size: 18px;
  color: #fff;
  text-align: center;
  padding-top: 2%;
}

.categoryMenu:hover {
  min-height: 120px;
  background-color: #552882;
  padding-top: 4%;
}

#sub_menu {
  position: absolute;
  left: 0;
  right: 0;
  /* bottom: 0;*/
  top: 83.4vh;
}

#sub_menu .categoryMenu a.active .menu-hover-image {
  display: block !important;
}

#sub_menu .categoryMenu a.active .menu-image {
  display: none !important;
}

#sub_menu .categoryMobileMenu a.active .menu-hover-image {
  display: block !important;
}

#sub_menu .categoryMobileMenu a.active .menu-image {
  display: none !important;
}

.categoryMenu li {
  list-style-type: none;
}

.categoryMenu .menu-hover-image,
.categoryMobileMenu .menu-hover-image {
  display: none;
}

.categoryMenu a:active,
.categoryMobileMenu a:active {
  text-decoration: none !important;
  color: #fff !important;
}

.categoryMenu a {
  color: #fff;
  font size: 12px;
}

.categoryMobileMenu li {
  list-style-type: none;
  display: flex;
  align-items: center;
}

.categoryMobileMenu p {
  display: inline;
}

.categoryMobileMenu .menu-image {
  display: inline;
}

.categoryMobileMenu .field-content a {
  display: inline;
}

.categoryMenu {
  border-left: 1px solid red;
}

<div id="sub_menu">
  <div class="categoryMenu col-sm-4 col-md-4">
    <a href="#">
      <li>
        <div class="menu-image">Hello</div>

        <p>Heading</p>
      </li>
    </a>
  </div>
  <div class="categoryMenu col-sm-4 col-md-4">
    <a href="#">
      <li>
        <div class="menu-image">Hello</div>

        <p>Heading</p>
      </li>
    </a>
  </div>
  <div class="categoryMenu col-sm-4 col-md-4">
    <a href="#">
      <li>
        <div class="menu-image">Hello</div>

        <p>Heading</p>
      </li>
    </a>
  </div>
</div>