如何避免li标签中的margin ul？

Question

正如你所看到的Item 1.2我有空间，如何去除它？

它必须是一个侧边栏嵌套菜单。

HTML

<div class="sidebar"> 
<ul> 
    <li> 
    <a href="#">Item 1</a> 
     <ul> 
     <li><a href="#">Item 1.1</a></li> 
     <li><a href="#">Item 1.2</a></li> 
     </ul>  
    </li> 
    <li><a href="#">Item 2</a></li> 
    <li><a href="#">Item 3</a></li> 
</ul> 
</div> 

CSS

.sidebar { 
    background: none repeat scroll 0 0 #F4F4F4; 
    float: left; 
    min-height: 600px; 
    width: 250px; 
} 


.sidebar ul { 
    float: left; 
    list-style: none outside none; 
    margin: 0; 
    padding: 0; 
    width: 100%; 
} 

.sidebar ul li { 
    border: 1px solid; 
    float: left; 
    margin: 0; 
    padding: 10px 0; 
    width: 100%; 
} 

.sidebar ul li a { 
    margin-left: 5px; 
} 

a:link, a:active, a:visited { 
    border: medium none; 
    color: inherit; 
    font-size: inherit; 
    text-decoration: none; 
} 

这里小提琴css menu example

Answer 1

假设你想同样的视觉保证金/填充：

http://jsfiddle.net/2U4Uv/2/

.sidebar { 
    background: none repeat scroll 0 0 #F4F4F4; 
    float: left; 
    min-height: 600px; 
    width: 250px; 
} 


.sidebar ul { 
    float: left; 
    list-style: none outside none; 
    margin: 0; 
    padding: 0; 
    width: 100%; 
} 

.sidebar ul li { 
    border: 1px solid; 
    float: left; 
    margin: 0; 
    /*padding: 10px 0;*/ 
    width: 100%; 
} 

.sidebar ul li a { 
    padding:10px 0; 
    display:block; 
    margin-left: 5px; 
} 

a:link, a:active, a:visited { 
    border: medium none; 
    color: inherit; 
    font-size: inherit; 
    text-decoration: none; 
}