Question

我是CSS新手。我想为div应用背景颜色。但div高度为零。 div也有子元素。这是我的代码。我将float添加到了ul,li个元素。我搜索了很多我清楚地应用到div的网站，但它没有改变。

 <div id="menulinks">
    <ul class="dropdown">
        <li>
            <a href="#">projectCategoraization</a>
            <div id="submenu_pc">
                <ul class="submenu">
                    <li><a href="#">dgfdg</a></li>
                    <li><a href="#">tutyu</a></li>
                    <li><a href="#">ert45</a></li>
                    <li><a href="#">7y56uty</a></li>
                </ul>
            </div>
        </li>
    </ul>
</div>

式

#submenu_pc {
    width:240px;
    display:none;
    position:absolute;
}
.dropdown {
    float:left;
}
.dropdown li {
    float:left;
    list-style:none;
}
.submenu {
    position:absolute;
}
.dropdown ul li {
    float:none;
}

脚本是

$(function(){
  $(".dropdown li").hover(function(){
        //alert("soumya");
        $(this).addClass("hover");
    $('#submenu_pc').css('display', 'block');
  });
});

Answer 1

使用子菜单类

为UL添加背景颜色

.submenu
{
    background-color:aqua;  
}

Answer 2

添加此CSS并完全删除脚本！

#menulinks{
    overflow:hidden;
    background: red; // choose your color
}

#submenu_pc {
    width:240px;
    display:none;
}

.dropdown li:hover #submenu_pc{
    display: block;
}
.dropdown {
    float:left;
}
.dropdown li {
    float:left;
    list-style:none;
}
.dropdown ul li {
    float:none;
}

Answer 3

.submenu有position: absolute，表示其父级的高度为0。删除position: absolute并为父级分配背景颜色;应该这样做。

jsFiddle

如何改变父div的高度？

3 个答案: