2012-10-26 103 views
0

如何添加一些padding-left:5px;到我的所有子菜單項。如何在下面修改CSS編碼來實現這個訣竅?在CSS水平下拉菜單中爲子菜單項添加填充

/*HORIZONTAL DROP-DOWN MENU */ 
#menu{ 
padding:0; 
margin:0; 
position: fixed; 
top: 30px; 
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; 
} 
#menu > ul > li > a{ 
    text-align:center; 
} 


<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> 
<ul> 
</div> 

回答

0

這是你在找什麼?

jsfiddle.net/MP5km/2/

剛剛將該CSS:

#menu li li a { padding-left: 5px; width:115px; } 
+0

很棒!我想有更多的方法來皮膚貓然後只是一個在世界上的CSS = \。非常感謝! –

0

你可以添加到你的CSS:

#menu ul ul li a { 
    width: 115px; 
    padding-left: 5px; 
} 

demo

+0

也很棒。再次感謝大家的幫助。愛你們在這裏。感謝您的知識和時間。 –