Html 悬停时父高度的子高度

我希望hover上的父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>

---

所以基本上正常高度是50px，当用户悬停在上面时，div会扩展到100px，下拉列表也会扩展到100px（它只是漂浮在盒子上）。现在我的问题是下拉列表保持在50px，而不是100px。你知道问题是什么吗（我基本上希望下拉列表扩展到100%的悬停div。

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

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

---

我也试过了，100%等于50px，而不是100px，我担心我一直在忙。好吧，现在我想它抓住父div高度的100%。但是我想它抓住悬停时父div的100%。所以我想它抓住100px，这将是hvoer上的父div。

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