javascript - Flexbox 下拉菜单宽度

Question

这是我的问题...我的下拉菜单很好用，但我收到投诉，当您将鼠标悬停在“研究”上时，下拉菜单没有父菜单那么宽。下拉菜单使用 flexbox 来随着视口(viewport)的变化而改变大小，使其响应式。我个人似乎无法让他们扩大他们的宽度。如果有人能解决这个问题，我将不胜感激。

CSS/HTML:

#hprcc-header-menubar {
    background-color: #DBE3BC;
    text-align: center;
    z-index: 9999;
}
nav ul {
    margin: 0;
    padding: 0;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    -moz-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
}
nav ul li {
    list-style: none;
    background-color: #DBE3BC;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#F5F5F5), to(#DBE3BC));
    background-image: -webkit-linear-gradient(top, #F5F5F5, #DBE3BC);
    background-image: -moz-linear-gradient(top, #F5F5F5, #DBE3BC);
    background-image: -o-linear-gradient(top, #F5F5F5, #DBE3BC);
    background-image: linear-gradient(to bottom, #F5F5F5, #DBE3BC);
    position: relative;
    -webkit-flex: 1 0 auto;
    -moz-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
}
nav ul li:hover {
    background-color: #C1C2BA;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#C1C2BA), to(#9E9E9E));
    background-image: -webkit-linear-gradient(top, #C1C2BA, #9E9E9E);
    background-image: -moz-linear-gradient(top, #C1C2BA, #9E9E9E);
    background-image: -o-linear-gradient(top, #C1C2BA, #9E9E9E);
    background-image: linear-gradient(to bottom, #C1C2BA, #9E9E9E);
}
nav ul li a {
    text-decoration: none;
    color: #F26D6D;
    font: 1.5em sans-serif;
    display: block;
    border: .1em #B3B87F solid;
}
nav ul li:hover a {
    color: #FFF;
}
nav ul li ul {
    position:absolute;
    top:-999em;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-flow: column wrap;
    -moz-flex-flow: column wrap;
    -ms-flex-flow: column wrap;
    flex-flow: column wrap;
    justify-content: space-around;
}
nav ul li:hover ul {
    top: auto;
    z-index: 9999;
}
nav ul li ul li {
    background: #C1C2BA;
}
nav ul li a:visited {
    color: #F26D6D;
    text-decoration:none;
}
nav ul li:hover a:visited {
    color: #FFF;
}
@supports (not ((flex-flow) or (-webkit-box-flow) or (-moz-box-flow) or (-ms-flexbox-flow) or (-webkit-flex-flow))) {
    nav ul {
        -webkit-flex-direction: row;
        -moz-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
    }
    nav ul li ul {
        -webkit-flex-direction: column;
        -moz-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }
}
nav ul li a:visited {
    color: #F26D6D;
    text-decoration:none;
}
nav ul li:hover a:visited {
    color: #FFF;
}

<div id="hprcc-header-menubar">
<nav>
    <ul>
        <li><a href="#">About Us</a>

            <ul>
                <li><a href="#">Highlights & Activities</a>
                </li>
                <li><a href="#">Personnel</a>
                </li>
                <li><a href="#">External Resources</a>
                </li>
                <li><a href="#">Contact Us</a>
                </li>
            </ul>
        </li>
        <li>	<a href="#">Services</a>

            <ul>
                <li><a href="#">Online Data Services</a>
                </li>
                <li><a href="#">Full Service</a>
                </li>
                <li><a href="#">Grant Funding</a>
                </li>
                <li><a href="#">Outreach</a>
                </li>
            </ul>
        </li>
        <li>	<a href="#">Research</a>

            <ul>
                <li><a href="#">Projects</a>
                </li>
                <li><a href="#">Publications</a>
                </li>
            </ul>
        </li>
        <li>	<a href="#">Climate Data</a>

            <ul>
                <li><a href="#">Climod2/Classic</a>
                </li>
                <li><a href="#">Maps</a>
                </li>
                <li><a href="#">Graphs</a>
                </li>
                <li><a href="#">StationSearch Tool</a>
                </li>
            </ul>
        </li>
        <li>	<a href="#">Climate Information</a>

            <ul>
                <li><a href="#">News</a>
                </li>
                <li><a href="#">Climate Change</a>
                </li>
                <li><a href="#">Climate Impact Reporter</a>
                </li>
                <li><a href="#">Summaries</a>
                </li>
                <li><a href="#">Monthly Webinars</a>
                </li>
            </ul>
        </li>
    </ul>
</nav>
</div>

JSFiddle http://jsfiddle.net/deadpickle/KCk9y/1/embedded/result/

Answer 1

在下面的 CSS 中添加 100% 的宽度

nav ul li ul {
position:absolute;
top:-999em;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-webkit-flex-flow: column wrap;
-moz-flex-flow: column wrap;
-ms-flex-flow: column wrap;
flex-flow: column wrap;
justify-content: space-around;
width:100%;
}

更新下面的 Jsfiddel。

http://jsfiddle.net/KCk9y/3/embedded/result/