浮动子 UL 保持父级宽度

Question

这里有一些类似的问题，但没有一个解决方案适合我的情况。我有一个需要居中的导航。 UL 中有一个子导航，需要与其父 LI 左对齐并水平布局。当我将子导航 LI 向左浮动时，UL 保持其父 LI 的宽度。

我设置了一个固定的 PX，但子导航需要可扩展，以便客户端可以添加或删除导航项目并保持布局。

这是我的 HTML：

<nav>
    <ul>
        <li><a href="../who_we_are/who_we_are.html">Who We Are</a>
            <ul>
            <li><a href="../who_we_are/our_approach.html">Our Approach</a></li>
                <li><a href="../who_we_are/what_we_do/what_we_do.html">What We Do</a></li>
                <li><a href="../who_we_are/leadership.html">Leadership</a></li>
            </ul>
        </li>
        <li><a href="../our_results/our_results.html">Our Results</a>
            <ul>
                <li><a href="../our_results/case_study_a.html">Case Study A</a></li>
                <li><a href="../our_results/case_study_b.html">Case Study B</a></li>
            </ul>
        </li>
        <li><a href="../our_experience/our_experience.html">Our Experience</a>
            <ul>
                <li><a href="#">Category Experience</a></li>
            </ul>
        </li>
        <li class="current"><a href="what_we_think.html">What We Think</a>
            <ul>
                <li><a href="#">Articles</a></li>
                <li><a href="#">Category Insight</a></li>
                <li><a href="#">Research</a></li>
                <li><a href="#">Training</a></li>
            </ul>
        </li>
        <li><a href="#">News</a>
            <ul>
                <li><a href="#">Press Releases</a></li>
                <li><a href="#">Articles</a></li>
            </ul>
        </li>
        <li><a href="#">Connect With Us</a>
            <ul>
              <li><a href="#">Join Us</a></li>
                <li><a href="../connect_with_us/find_us.html">Find Us</a></li>
            </ul>
        </li>
        <li><div class="search"><input name="searchbox" type="text" id="searchbox" class="input_style" value="SEARCH" onFocus="if (this.value == 'SEARCH') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'SEARCH';}"><button></button></div></li>
    </ul>
</nav>

这是我的 CSS：

nav a,
nav a:visited {
    color: #888888;
    text-decoration: none;
    display: inline-block;
    line-height: 30px;
}
nav a:hover {
    color: #CCC;
}
nav a:active {
    color: #FFF;
}
nav {
    text-align: center;
}
nav ul {
    display: inline-block;
    position: relative;
    z-index: 597;
}
nav ul li {
    float: left;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
    z-index: 599;
    line-height: 30px;
}
nav ul li ul {
    display: none;
}
nav li.current a {
    background: url(../img/nav_arrow.png) no-repeat center bottom;
    color: #FFF;
}
nav li.current ul {
    display: block;
    position: absolute;
    z-index: 598;
    top: 31px;
    left: 1px;
    width: auto;
}
nav li.current ul a {
    background: url(none);
    color: #888888;
}
nav li.current ul li {
    float: left;
    display: inline-block;
}
nav .search {
    height: 18px;
    width: 84px;
    padding-left: 4px;
    background: url(../img/search_bk.png) no-repeat;
    margin-left: 20px;
    margin-top: 5px;
    float: left;
}
nav .search input {
    height: 14px;
    width: 68px;
    float: left;
    background-color: transparent !important;
    border-style: none;
}
nav .search input.input_style {
    font-family: "proxima-nova", sans-serif;
    padding-top: 3px;
    color: #777777;
}
nav .search button {
    height: 11px;
    width: 10px;
    float: left;
    background-image: url(../img/search_btn.png);
    background-color: transparent;
    border-style: none;
    background-repeat: no-repeat;
    margin-top: 3px;
}

这是屏幕截图： 我的屏幕截图

提前致谢！

Answer 1

只需将子菜单 UL 的宽度设置为可笑的，例如 width:2000px 而不是 width:auto；这样，项目就可以在子导航 ul 中水平浮动。

通常，网站菜单不会超过页面区域的宽度，那么为什么子菜单 UL 的宽度过大会很重要呢？它只是为了容纳你的 li 元素，它会漂浮在任何内容之上。

我用这个： http://matthewjamestaylor.com/blog/centered-dropdown-menus

所以我的子菜单 ul 看起来像；

#centeredmenu ul ul {
display: none;
float: left;
left: 0;  // important to keep menu left aligned to parent li element>
position: absolute;
right: auto;
top: 2em;
width: 1000px; // set to whatever you want //
}


#centeredmenu ul ul li {   

display: inline-block; // not really needed
left: 0; // important
}