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，下拉列表（它只是漂浮在盒子上）也是如此。现在我的问题是下拉停留在50px，而不是100px。你知道问题是什么吗？ :(我基本上喜欢将下拉列表扩展到完全100％的悬停div。

Answer 1

只需在最后一条规则

中的dropdownbuttonsholder中删除鼠标悬停

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

父母身高的儿童身高在翱翔的

1 个答案: