Search code examples
cssdrop-down-menusubmenu

css sub child ul width of its child, not parent

I've got a menu with multiple child elements, the problem I'm having is that the child menu is displaying as the width of its parent, not its child element.

enter image description here

Here's my code:

#navbar ul {
    float: none;
    margin: 0;
    padding: 0
}
#navbar ul li {
    margin: 0;
    padding: 0;
    display: inline-block
}
#navbar ul li > a,
#navbar ul li > span {
    color: #004665;
    padding: 10px 0 10px 35px;
    margin: 0;
    display: block;
    font-family: 'roboto-condensed', sans-serif;
    font-weight: 700;
    font-size: 24px;
    text-transform: uppercase;
    line-height: 72px
}
#navbar ul li.active > a,
#navbar ul li > a:hover,
#navbar ul li > a:focus {
    color: #6fbfe6;
    background: none
}
#navbar ul li > ul {
    position: absolute;
    background: #f0f5f7;
    padding: 30px 0 20px;
    border-top: solid 2px #b1b1b1;
    display: none
}
#navbar ul li > ul li {
    display: block;
    margin: 0;
    padding: 0;
    white-space: nowrap
}
#navbar ul li > ul li > a {
    font-size: 20px;
    line-height: normal;
    margin: 0;
    padding: 0 30px 10px;
    white-space: nowrap
}
#navbar ul li > ul li > ul {
    left: 100%;
    right: 0;
    z-index: 1000;
    top: -32px;
    width: 100%
}
#navbar ul li > ul li > ul li.parent:hover > ul {
    display: block
}
<ul>
    <li class="item-120 parent">
        <a href="/">Academics</a>
        <ul class="nav-child">
            <li class="item-204 parent"><a href="/">IB Programmes</a>
            <li class="item-205 parent">
                <a href="/">VCE</a>
                <ul class="nav-child">
                    <li class="item-215"><a href="/">VCE Overview</a></li>
                    <li class="item-216"><a href="/">Outcomes and SACs</a></li>
                    <li class="item-217"><a href="/">Assessment and Scoring</a></li>
                    <li class="item-218"><a href="/">Subjects We Offer</a></li>
                    <li class="item-219"><a href="/">Who is the VCE for?</a></li>
                </ul>
            </li>
            <li class="item-205 parent"><a href="/">Student Wellbeing</a>
            <li class="item-207 parent"><a href="/">Resource Library</a>
        </ul>
    </li>
</ul>

Fiddle here: https://jsfiddle.net/fw16jw1y/

Solution

  • Remove width: 100% and right: 0 from the following code:

    #navbar ul li > ul li > ul {
    left: 100%;
    right: 0;   /* REMOVE */
    z-index: 1000;
    top: -32px;
    width: 100%  /* REMOVE */
}

    You are containing the ul element by defining width.

    Working Fiddle