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

这是JSFiddle:

jsfiddle.net/spog4sqg/1

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

我需要添加代码以获得这样的输出(正如我标记的那样):

有人能帮我吗?