CSS3導航菜單懸停狀態問題

這是我的代碼是我曾嘗試：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

我可能知道如何設置導航的全寬？當調整窗口大小時，導航欄應該是全寬，列表應該居中。如何解決這個問題？

我需要爲獲得這樣的輸出（因爲我標誌着我想要什麼）添加代碼：

enter image description here