css - 下拉 ul 仅扩展到第一个子 li

Question

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

不幸的是，带有背景渐变的下拉 ul 只会扩展到第一个列表项的高度。我已经为其他网站编写了相同的 css，但由于某种原因，它不适用于这个网站。我这辈子都想不通。如果有人知道会发生什么，我将不胜感激！

这是一个链接：

http://madzecreations.com/_test_site/

谢谢！

Answer 1

好的，事实证明这只是一个 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>

当然现在完美运行。不过感谢大家的帮助，我很感激！

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

您的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;
}