css3导航菜单悬停状态问题

Question

这是我试过的代码：

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

这是JSFiddle：

jsfiddle.net/spog4sqg/1

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

我需要添加代码来获取这样的输出（因为我标记了我想要的内容）：

有人可以帮我吗？

Answer 1

我在display: inline-flex;

中添加了.nav此属性

DEMO

Answer 2

你可以像this

那样试试

我用过。

display: table和display: table-cell

和不需要js用于此