css - liタグのマージンフォームulを避けるには?

Question

Item 1.2I have the space の下に表示されているように、それを削除するにはどうすればよいですか?

サイドバーのネストされたメニューである必要があります。

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メニューの例があります

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;
}