css sub child ul width of its child, not parent 宽度

Question

我有一个包含多个子元素的菜单，我遇到的问题是子菜单显示为其父元素的宽度，而不是其子元素的宽度。

这是我的代码：

#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 这里：https://jsfiddle.net/fw16jw1y/

Answer 1

从以下代码中删除 width: 100% 和 right: 0：

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

您通过定义 width 来包含 ul 元素。

Working Fiddle

Answer 2

尝试这样的事情，

nav > ul > li > ul > li > a {
    max-width: 150px;
    text-overflow: ellipsis;
    overflow: hidden;
}

你可以参考这个 post, Child element auto width (larger than parent) , Allow absolutely positioned element to be wider than parent absolutely positioned element

css sub child ul width of its child, not parent 宽度

css sub child ul width of its child, not parent

css

submenu

drop-down-menu