html - 嵌套链接重叠

最里面的嵌套链接出现在第二个最里面的嵌套链接上。在单击其父级之前，甚至不应显示它们。

HTML：

<ul>
    <li class="current-menu-ancestor">
        <a href="#">about us</a>
        <ul class="sub-menu">
            <li class="current-menu-ancestor">
                <a href="#">locations</a>
                <ul class="sub-menu">
                    <li class="current-menu-ancestor">
                        <a href="#">georgia</a>
                        <ul class="sub-menu">
                            <li class="current-menu-item">
                                <a href="#">atlanta</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

看到这里：http://guardianwebtest.edulence.com/ashford/locations/main/georgia

3层可以工作，但是由于某种原因，第四层会被覆盖。不知道为什么会这样。

最佳答案

此问题是由以下规则中声明的高度引起的。如果将其删除，所有物品将不再挤在一起：

#content-wrap #sidebar li ul.sub-menu li ul.sub-menu li,
#content-wrap #sidebar ul.sub-menu li:first-child ul.sub-menu li{
    background: url("images/l-nav-subnav.gif") no-repeat scroll 0 0 transparent;
    margin-left: 30px;
    padding-left: 15px;
    height: 20px; /* remove this line */
}