浮动子UL保持父UL宽度

Question

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

我设置了一个固定的PX，但是sub需要是可扩展的，这样客户端才能添加或删除导航项目并保持布局。

这是我的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;
}

这是一个屏幕截图：My Screenshot

提前感谢！

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
}