Wie um zu unterstreichen Liste Elemente einzeln mit CSS?

Möchte ich einige leeren Raum zwischen den Linien in meiner Liste. Im moment sind die Zeilen fortlaufend sind. Hier ein jsfiddle Beispiel, das ich erstellt: http://jsfiddle.net/bonyhad/pnPDz/8/

Hier ist der CSS:

#example {
    width:800px;
    height:220px;
    display:block;
    overflow:hidden;
    margin:0 0 4em 0;
}

#example ul {
    list-style:none; 
    margin:0;
}

#example li {
    border-bottom:1px solid #fff;
}

#example h1 { 
    color:#000; 
    font-size:20px; 
    margin-bottom:5px; 
}

#example a:link, #example a:visited {
    color: #444; 
    display:block; 
    border-bottom:1px solid #666; 
    text-decoration:none; 
    padding: .3em .25em;
}

.links {
    float:left;
    width:615px;
    margin:0;
    padding:0;
}

.links ul {
    margin:0;
    padding:0;
}
#example .links li {
    float:left; 
    margin 0 20px 0 0; 
    width:185px;
}

#example .links li:nth-last-child(2),
#example .links li:nth-last-child(3),
#example .links li:nth-last-child(2) a,
#example .links li:nth-last-child(3) a, 
#example li:last-child, 
#example li:last-child a {
    border: 0;
}

Und hier die HTML:

<section id="example">
    <div class="links">
    <h1>links</h1>
        <ul>
            <li><a href="#">Example1</a></li>
            <li><a href="#">Example2</a></li>
            <li><a href="#">Example3</a></li>
            <li><a href="#">Example4</a></li>
            <li><a href="#">Example5</a></li>
            <li><a href="#">Example6</a></li>
            <li><a href="#">Example7</a></li>
            <li><a href="#">Example8</a></li>
            <li><a href="#">Example9</a></li>
            <li><a href="#">Example10</a></li>
            <li><a href="#">Example11</a></li>
            <li><a href="#">Example12</a></li>
            <li><a href="#">Example13</a></li>
            <li><a href="#">Example14</a></li>
            <li><a href="#">Example15</a></li>
            <li><a href="#">Example16</a></li>
            <li><a href="#">Example17</a></li>
            <li><a href="#">Example18</a></li>
        </ul>
    </div>
</section>

Jedes Element in der Liste sollte Unterstrichen werden separat, nicht als eine kontinuierliche Linie.