避免在列表中填充

Question

我正在處理一個菜單，如果打開的頁面有任何子項，則會進行擴展。 它看起來像這樣：

http://jsfiddle.net/phacer/qzykv/

婁剛在淺灰色的內部菜單中有其< LI>父位填充。 我正在考慮使用行高，但在某些地方菜單項是兩行文字。而且我還需要使用每個項目之間的虛線邊框。

任何關於如何獲得我現在擁有的東西的建議，但沒有爲有子女的家長填充空白？

HTML：

<nav> 
<ul class="menu"><li class="first"><a href="#" title="" >Home</a></li> 
<li class="active"><a href="#" title="" >Home</a><ul><li class="first"><a href="#" title="" >Home</a></li> 
<li><a href="#" title="" >Home</a></li> 
<li class="last"><a href="#" title="" >Home</a></li> 
</ul></li> 
<li><a href="#" title="" >Home</a></li> 
<li><a href="#" title="" >HomeHome HomeHome Home HomeHome </a></li> 
<li><a href="#" title="" >Home</a></li> 
<li><a href="#" title="" >Home</a></li> 
<li><a href="#" title="" >Home</a></li> 
<li class="last"><a href="#" title="Contact" >Contact</a></li> 
</ul> 
</nav>​ 

CSS：

nav { width: 165px; min-height: 500px; position: relative; display: inline-block; float: left; } 
nav ul li { padding: 10px 0 10px 20px; } 
nav ul li a { margin-right: 10px; max-width: 125px; } 
nav ul li.first { padding-top: 23px; } 
nav ul li ul { margin-left: -20px; margin-top: 10px; } 
nav ul li ul li { padding-left: 30px; } 
nav ul li ul li.first { padding-top: 10px; } 
nav ul li ul li ul { margin-left: -30px; margin-top: 10px; } 
nav ul li ul li ul li{ padding-left: 40px; } 
nav ul li ul li ul li.first { padding-top: 10px; } 

nav ul li.active ul li a, 
nav ul li.active ul li a:visited, 
nav ul li.active ul li.active ul li a, 
nav ul li.active ul li.active ul li a:visited  { color: #5c5c5c; } 
nav a:hover, 
nav ul li.active a         { color: #e0001b; } 
nav ul li.active ul li.active a, 
nav ul li.active ul li.active ul li.active a, 
nav ul li.active ul li a:hover, 
nav ul li.active ul li.active a:hover { color: #91298e; } 

nav     { background: #5c5c5c repeat-x left top; } 
nav ul li   { border-bottom: 1px dotted #fff; } 
nav ul li ul  { background: #d6d6d7; } 
nav ul li ul li  { border-bottom: none; border-top: 1px dotted #555; } 
nav ul li ul li ul { background: #ecedee; } 

nav { font-size: 12px; list-style-type: none; line-height: 14.5px; text-align: left; } 

Answer 1

您需要添加nav ul li.active{padding:10px 0 0 10px;}到你的CSS來清除活性li的底部填充用ul

見http://jsfiddle.net/qzykv/5/

Answer 2

您必須添加以下在你的CSS行。它將刪除有孩子的父李的填充。

nav ul li.active{padding:0px;}