Flexbox Drop Down Menu width

Question

Here is my issue... my drop down menu works great but I'm getting complaints that when you hover over Research the drop downs are not as wide as the parents. The drop down menu uses flexbox to change sizes as the viewport changes making it responsive like. I for one cant seem to get them to expand their width. If anyone can figure this out I would be very appreciated.

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

Add 100% width in the following CSS

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%;
}

Update Jsfiddel below.

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