0
我有类似菜单的选项卡，我想在悬停的div上增加高度或填充。现在我的div在hover的底部扩展。我想增加顶部的高度悬停增加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>