Javascript Flexbox下拉菜单宽度

这是我的问题。。。我的下拉菜单效果很好，但我收到的抱怨是，当你停留在研究上时，下拉菜单的宽度不如父母。下拉菜单使用flexbox在视口更改时更改大小，使其响应速度类似。就我个人而言，我似乎无法让它们扩大宽度。如果有人能弄明白这一点，我将不胜感激

CSS/HTML：

#hprcc标题菜单栏{
背景色：#DBE3BC；
文本对齐：居中；
z指数：9999；
}
导航ul{
保证金：0；
填充：0；
显示：-webkit flex；
显示：-moz flex；
显示：-ms flex；
显示：-o-flex；
显示器：flex；
-webkit flex流：行换行；
-moz-flex-flow：行换行；
-ms flex流：行换行；
柔性流：行换行；
}
李国荣{
列表样式：无；
背景色：#DBE3BC；
背景图像：-webkit渐变（线性、左上、左下、从（#F5）到（#DBE3BC））；
背景图像：-webkit线性渐变（顶部，#F5，#DBE3BC）；
背景图像：-moz线性渐变（顶部，#F5，#DBE3BC）；
背景图像：-o-线性梯度（顶部，#F5，#DBE3BC）；
背景图像：线性渐变（至底部，#F5，#DBE3BC）；
位置：相对位置；
-webkit flex:10自动；
-moz-flex:10自动；
-ms-flex:10自动；
弹性：10自动；
}
nav ul li:悬停{
背景色：#C1C2BA；
背景图像：-webkit渐变（线性、左上、左下、从（#C1C2BA）到（#9E9E9E））；
背景图像：-webkit线性渐变（顶部，#C1C2BA，#9E9E）；
背景图像：-moz线性梯度（顶部，#C1C2BA，#9E9E）；
背景图像：-o-线性梯度（顶部，#C1C2BA，#9E9E）；
背景图像：线性渐变（至底部，#C1C2BA，#9E9E9E）；
}
海军ulli a{
文字装饰：无；
颜色：#F26D6D；
字体：1.5em无衬线；
显示：块；
边框：1em#B3B87F实心；
}
nav ul li:悬停a{
颜色：#FFF；
}
nav ul li ul{
位置：绝对位置；
顶部：-999em；
显示：-webkit flex；
显示：-moz flex；
显示：-ms flex；
显示：-o-flex；
显示器：flex；
-webkit flex流：列换行；
-moz-flex-flow：列换行；
-ms-flex-flow：列换行；
柔性流：柱包裹；
证明内容：周围的空间；
}
导航ulli：悬停ul{
顶部：自动；
z指数：9999；
}
李国荣{
背景：#C1C2BA；
}
李娜：参观了{
颜色：#F26D6D；
文字装饰：无；
}
导航ulli:悬停a:已访问{
颜色：#FFF；
}
@支持（非（（flex-flow）或（-webkit-box-flow）或（-moz-box-flow）或（-ms-flexbox-flow）或（-webkit-flex-flow）））{
导航ul{
-webkit柔性方向：行；
-moz弯曲方向：行；
-ms柔性方向：行；
弯曲方向：行；
}
nav ul li ul{
-webkit柔性方向：列；
-moz-flex方向：列；
-ms-flex方向：列；
弯曲方向：立柱；
}
}
李娜：参观了{
颜色：#F26D6D；
文字装饰：无；
}
导航ulli:悬停a:已访问{
颜色：#FFF；
}

在以下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