0 votes
ago in Education by (1.7m points)
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.

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 ****="/">Academics</a>

        <ul class="nav-child">

            <li class="item-204 parent"><a ****="/">IB Programmes</a>

            <li class="item-205 parent">

                <a ****="/">VCE</a>

                <ul class="nav-child">

                    <li class="item-215"><a ****="/">VCE Overview</a></li>

                    <li class="item-216"><a ****="/">Outcomes and SACs</a></li>

                    <li class="item-217"><a ****="/">Assessment and Scoring</a></li>

                    <li class="item-218"><a ****="/">Subjects We Offer</a></li>

                    <li class="item-219"><a ****="/">Who is the VCE for?</a></li>

                </ul>

            </li>

            <li class="item-205 parent"><a ****="/">Student Wellbeing</a>

            <li class="item-207 parent"><a ****="/">Resource Library</a>

        </ul>

    </li>

</ul>

Run code snippetExpand snippet

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

JavaScript questions and answers, JavaScript questions pdf, JavaScript question bank, JavaScript questions and answers pdf, mcq on JavaScript pdf, JavaScript questions and solutions, JavaScript mcq Test , Interview JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)

1 Answer

0 votes
ago by (1.7m points)
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
...