html - 嵌套链接覆盖

Question

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

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 层工作，但由于某种原因，第四层被覆盖。不知道为什么会这样。

Answer 1

该问题是由以下规则中声明的高度引起的。如果您删除它，所有项目将停止挤压在一起：

#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 */
}