居中水平子菜单的CSS水平菜单

Question

我有一个垂直子菜单的水平菜单，但我想使下拉子菜单也水平。我一直在努力完成这个好几天没有运气。下面是一个例子http://jsfiddle.net/bukYf/这里是我的菜单中的CSS ..

/* Navigation Menu Styles */ 
#nav { 
    margin: 0; 
    padding: 7px 6px 0; 

    line-height: 100%; 
} 
#nav li { 
    margin: 0 5px; 
    padding: 0 0 8px; 
    float: left; 
    position: relative; 
    list-style: none; 
} 


/* main level link */ 
#nav a { 
    font-weight: bold; 
    color: #65a7ed; 
    text-decoration: underline; 
    display: block; 
    padding: 8px 10px; 
    margin: 0; 

    -webkit-border-radius: 1.6em; 
    -moz-border-radius: 1.6em; 

} 
#nav a:hover { 
    background: #fff; 
    color: #000; 
} 

/* main level link hover */ 
#nav .current a, #nav li:hover > a { 
    background: #65a7ed url(img/gradient.png) repeat-x 0 -40px; 
    color: #fff; 
    border-top: solid 1px #f8f8f8; 

    -webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2); 
    -moz-box-shadow: 0 1px 1px rgba(0,0,0, .2); 
    box-shadow: 0 1px 1px rgba(0,0,0, .2); 


} 

/* sub levels link hover */ 
#nav ul li:hover a, #nav li:hover li a { 
    background: none; 
    border: none; 
    color: #666; 

    -webkit-box-shadow: none; 
    -moz-box-shadow: none; 
} 
#nav ul a:hover { 
    background: #0078ff url(img/gradient.png) repeat-x 0 -100px !important; 
    color: #fff !important; 

    -webkit-border-radius: 0; 
    -moz-border-radius: 0; 

    text-shadow: 0 1px 1px rgba(0,0,0, .1); 
} 

/* dropdown */ 
#nav li:hover > ul { 
    display: block; 
} 

/* level 2 list */ 
#nav ul { 
    display: none; 

    margin: 0; 
    padding: 0; 
    width: 70px; 
    position: absolute; 
    top: 35px; 
    left: 0; 
    background: #b6d1ee url(img/gradient.png) repeat-x 0 0; 
    border: solid 1px #b4b4b4; 

    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 

    -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3); 
    -moz-box-shadow: 0 1px 3px rgba(0,0,0, .3); 
    box-shadow: 0 1px 3px rgba(0,0,0, .3); 
} 
#nav ul li { 
    float: none; 
    margin: 0; 
    padding: 0; 
    text-align:center; 
} 

#nav ul a { 
    font-weight: normal; 
} 

/* level 3+ list */ 
#nav ul ul { 
    left: 61px; 
    top: -3px; 
} 

/* rounded corners of first and last link */ 
#nav ul li:first-child > a { 
    -webkit-border-top-left-radius: 9px; 
    -moz-border-radius-topleft: 9px; 

    -webkit-border-top-right-radius: 9px; 
    -moz-border-radius-topright: 9px; 
} 
#nav ul li:last-child > a { 
    -webkit-border-bottom-left-radius: 9px; 
    -moz-border-radius-bottomleft: 9px; 

    -webkit-border-bottom-right-radius: 9px; 
    -moz-border-radius-bottomright: 9px; 
} 

/* clearfix */ 
#nav:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 
#nav { 
    display: inline-block; 
} 
html[xmlns] #nav { 
    display: block; 
} 

* html #nav { 
    height: 1%; 
} 

我敢肯定的答案很简单我只是一直没能完成它。

Answer 1

是很重要的。 HTML

CSS

#menu { 
    background: #222; 
    background: -moz-linear-gradient(#222, #555); 
    background: -webkit-linear-gradient(#22, #555); 
    background: -o-linear-gradient(#222, #555); 
    background: -ms-linear-gradient(#222, #555); 
    background: linear-gradient(#222, #555); 
    position:absolute; 
    width:100%; 
} 
#v { 
    color:#fff; 
    position:relative; 
    display:inline-block; 
    font-family:Helvetica, Arial, sans-serif; 
    font-size:14px; 
    padding:10px; 
} 
#sub { 
    width:85px; 
    background:#ccc; 
    display:none; 
    position:absolute; 
    z-index:2; 
    margin-top:10px; 
} 
a { 
    font-size:14px; 
    line-height:1.3em; 
    display:block; 
    text-decoration:none; 
    font-family:Helvetica, Arial, sans-serif; 
    font-weight:normal; 
    padding:8px; 
    color: white; 
    text-shadow: black 0.3em 0.3em 0.4em; 
} 
a:hover { 
    color:#444; 
    text-decoration:none; 
} 
#v:hover #sub { 
    display:block; 
} 

这里是JsFiddle