Question

这是一个非常简单的直接css下拉导航菜单。

不幸的是，带有背景渐变的下拉式ul只会扩展到第一个列表项的高度。我已经为其他网站写了这个相同的CSS，并且由于某种原因，它不适用于这个。无法理解我的生活。如果有人知道可能会发生什么，我会非常感激！

这是一个链接：

谢谢！

Answer 1

您的li元素包含4个<a>元素 - 但您有一条规则max-height: 30px;

将其更改为max-height: 180px;，它应该有效。

#main_nav li:hover > ul li {

max-height: 180px;
opacity: 1;
visibility: visible;
position: relative;
z-index: 4;
}

Answer 2

您已添加渐变，而不是添加li a：

而不是在这里：

#main_nav li ul{
linear-gradient(to bottom, #FCBB07 0%, #EFE39E 100%) repeat scroll 0 0 transparent
}

将渐变放在这里：

#main_nav li ul li a{
linear-gradient(to bottom, #FCBB07 0%, #EFE39E 100%) repeat scroll 0 0 transparent
}

Answer 3

好的，事实证明这只是一个HTML错误;我只是没有在它自己的li标签中标记每个下拉链接：

我这样做了：

    <li>
    <a href="#">NAV 1</a>
    <ul>
    <li>
    <a href="#">FIRST LI</a>
    <a href="#">SECOND LI</a>
    <a href="#">THIRD LI</a>
    <a href="#">FOURTH LI</a>
    </li>
    </ul>
    </li>

我应该这样做：

    <li>
    <a href="#">NAV 1</a>
    <ul>
    <li>
    <a href="#">FIRST LI</a>
    </li>
    <li>
    <a href="#">SECOND LI</a>
    </li>
    <li>
    <a href="#">THIRD LI</a>
    </li>
    <li>
    <a href="#">FOURTH LI</a>
    </li>
    </ul>
    </li>

当然现在完美无缺。感谢大家的帮助，我很感激！

下拉ul只扩展到第一个孩子李

3 个答案: