如何使UL子菜单高度动态化

Question

我有以下小提琴：http://jsfiddle.net/g4zLzyqf/

部分HTML：

<div id="navMenuHolder" class="navMenuHolder">
    <nav id="navMenu" class="navMenu">
        <ul>
            <li class="active">
                <a href="index.php">Home</a>
            </li>
        </ul>
    </nav>
</div>

正如您所见，Directory下的子菜单下面有额外的空间。

请帮助我，以便子菜单是动态的，并且只会根据子菜单中的项目数量进行扩展。

Answer 1

将此高度更改为自动

.navMenu ul li:hover ul{
    height:auto;
}

Answer 2

您将父级（li）悬停时的子菜单高度（ul）设置为195像素。将其更改为自动。

.navMenu ul li:hover ul {
    height: auto;

http://jsfiddle.net/g4zLzyqf/2/

您也可以完全删除此高度。
但是，由于您在.navMenu ul ul {中将高度设置为0，因此在悬停样式.navMenu ul li:hover ul中删除高度（不覆盖）将使子菜单高度为0。
从两个选择器中移除高度元素，这样可以正常工作。

Answer 3

调整您的保证金http://jsfiddle.net/g4zLzyqf/1/

.navMenu ul  li:hover ul  {
height: 195px;
margin-top:0px ;
opacity: 1;
visibility: visible;
}