CODEWITHSUNDEEP
htmlcsswordpress
Kegan Quimby
Kegan Quimby

Reputation: 546

nested links overlaying

The inner most nested links are appearing on the second inner most inner nested links. They shouldn't even be displayed until their parent is clicked.

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>

See here: http://guardianwebtest.edulence.com/ashford/locations/main/georgia

3 layers work, but for some reason the fourth gets overlaid. Not sure why this is happening.

Upvotes: 0

Views: 86

Answers (1)

tw16
tw16

Reputation: 29605

The problem is caused by a height being declared in the rule below. If you remove it all the items stop squishing together:

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

Upvotes: 3

Related Questions