圍繞只在CSS水平下拉菜單頂部指數菜單項

Question

如何修改CSS使得只有頂部項（索引項）都centerered，子項都很好（因爲它們已經位於左側）？

<div id="menu"> 
<ul> 
<li><a href="#nogo">File</a> 
<ul> 
<li><a href="#nogo">Save</a></li> 
<li><a href="#nogo">Link 1-2</a></li> 
<li><a href="#nogo">Link 1-3</a></li> 
</ul> 
</li> 
<li><a href="#nogo">Edit</a> 
<ul> 
<li><a href="#nogo">Link 2-1</a></li> 
<li><a href="#nogo">Link 2-2</a></li> 
<li><a href="#nogo">Link 2-3</a></li> 
</ul> 
</li> 
<li><a href="#nogo">View</a> 
<ul> 
<li><a href="#nogo">Link 3-1</a></li> 
<li><a href="#nogo">Link 3-2</a></li> 
<li><a href="#nogo">Link 3-3</a></li> 
</ul> 
</li> 
</ul> 
</div> 

/*HORIZONTAL DROP-DOWN MENU */ 
#menu{ 
padding:0; 
margin:0; 
position: fixed; 
top: 33px; 
left: 0px; 
font-size: 8pt; 
} 
#menu ul{ 
padding:0; 
margin:0; 
} 
#menu li{ 
position: relative; 
float: left; 
list-style: none; 
margin: 0; 
padding:0; 
} 

#menu li a{ 
width:120px; 
height: 20px; 
display: block; 
text-decoration:none; 
line-height: 20px; 
background-color: #A9BBD3; 
color: #FFF; 
} 

#menu li a:hover{ 
background-color: #446087; 
} 

#menu ul ul{ 
position: absolute; 
top: 20px; 
visibility: hidden; 
} 

#menu ul li:hover ul{ 
visibility:visible; 
} 

Answer 1

最簡單的方法是靶向特異性利用>CSS child combinator頂層。

jsFiddle example

#menu > ul > li > a{ 
    text-align:center; 
} 

添加此規則將圍繞頂層文本，同時使子菜單文本左對齊。

Answer 2

您可以只需添加一個新的類，然後將該類添加到您的熱門商品。例如

#menu li.top_item{ 
    text-align: center; 
} 

，然後在html：

<div id="menu"> 
<ul> 
<li class="top_item"><a href="#nogo">File</a> 
<ul> 
<li class="top_item"><a href="#nogo">Save</a></li> 
<li><a href="#nogo">Link 1-2</a></li> 
<li><a href="#nogo">Link 1-3</a></li> 
</ul> 
</li> 
<li class="top_item"><a href="#nogo">Edit</a> 
<ul> 
<li><a href="#nogo">Link 2-1</a></li> 
<li><a href="#nogo">Link 2-2</a></li> 
<li><a href="#nogo">Link 2-3</a></li> 
... 

Answer 3

例如http://jsfiddle.net/zhprP/ 添加類到頂部元素和其他類到子項如

<li class='top'>File</li> 
    <li class='sub'>...</li> 

和css適用：

.top{ 
    text-align:center; 
    } 
.sub{text-align:left;}