Jquery css3导航菜单悬停状态问题

这是我尝试过的代码：

 body {
    font-family: Verdana;
    margin: 0;
    padding: 0;
    min-width: 990px;
}
.nav {
    margin: 0px;
    padding: 0px;
    list-style: none;
}
.nav li {
    float: left;
    width: 160px;
    position: relative;
}
.nav li a {
    background: #FF0000;
    color: #fff;
    display: block;
    padding: 7px 8px;
    text-decoration: none;
}
.nav li a:hover {
    background-color: #000;
}
.nav ul {
    display: none;
    position: absolute;
    margin-left: 0px;
    list-style: none;
    padding: 0px;
}
.nav ul li {
    width: 160px;
    float: left;
}
.nav ul a {
    display: block;
    height: 15px;
    padding: 7px 8px;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid #222;
}
.nav ul li a:hover {
    color: #069;
}

这是JSFIDLE：

我可以知道如何设置导航的全宽吗？调整窗口大小时，导航栏应为全宽，列表应居中。如何解决这个问题

我需要添加代码以获得如下输出（因为我标记了我想要的）：

---

有人能帮我吗？

我添加了

display:inline flex

此属性位于

.nav

你可以试一下

我用过

显示：表格

和

显示：表格单元格

---

这不是一个教程网站抱歉@ChamikaSandamal：我在谷歌搜索，仍然没有找到解决方案，所以只是在stackoverflow的帮助下询问。在子菜单中，看起来像上面我发布的图片。参考这个，你可能会得到一些帮助。谢谢，但你的答案不准确，我需要什么。