html - 悬停时父高度的子高度

Question

我希望悬停时我的父 div 将其高度传递给子 div。但是我似乎无法正确地做到这一点 :( 这是我正在使用的 HTML:

<ul class="sidebarbuttons2">
    <li><a href="#"> <h1> Title </h1> </a>
        <ul class="dropdownbuttonsholder row">
            <ul id="dropdownbuttonitem1" class="col-xs-6"><a href="#"> Item 1 </a></ul>
            <ul id="dropdownbuttonitem2" class="col-xs-6"><a href="#"> Item 2 </a></ul>
            <ul id="dropdownbuttonitem3" class="col-xs-6"><a href="#"> Item 3 </a></ul>
            <ul id="dropdownbuttonitem4" class="col-xs-6"><a href="#"> Item 4 </a></ul>
        </ul>
    </li>
</ul>

然后我正在尝试这个 CSS，但它不会完成我想做的事情:

.sidebarbuttons2    {
    width: 100%;
    max-height: 50px;
    position: relative;
}

.sidebarbuttons2:hover {
    min-height: 100px;
}

.dropdownbuttonsholder  {
    display: none;
}               

.sidebarbuttons2:hover .dropdownbuttonsholder:hover     {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
}

所以基本上正常的高度是 50px，然后当用户将鼠标悬停在它上面时，div 扩展到 100px，下拉菜单也是如此(它只是 float 在框上)。现在我的问题是下拉菜单保持在 50px，并没有达到 100px。你知道问题是什么吗？ :( 我基本上希望下拉菜单扩展到悬停 div 的全部 100%。

Answer 1

只需在最后一条规则中删除 dropdownbuttonsholder 中的悬停

.sidebarbuttons2:hover .dropdownbuttonsholder {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
}