Css 在垂直对齐的列表项的左边框之间创建空间

我正在尝试制作一个垂直导航条。我使用了一个无序的列表，带有左边框，这样悬停时，我可以更改边框的不透明度/颜色。现在的问题是，此边框在列表项中显示为一条连续线。我想在列表项之间留出一些空间，以便将边框分隔开，从而可以确定哪个边框属于哪个列表项

HTML:

---

jshiddle:

您可以在列表项中添加边距。类似于边距底部：5px；：

---

太简单了！我感到羞愧|

<div class="leftNavbar">
            <span class="navLine"></span>
            <ul>
                <li>Introduction</li>
                <li>Whats new?</li>
                <li>Gallery</li>
            </ul>
        </div>

.leftNavbar{
    position: absolute;
    top: 100px;
    z-index: 500;
    left: 50px;
    vertical-align: middle; 
}
.leftNavbar ul{
    list-style: none;
}
.leftNavbar ul li{
    font-family: 'Sintony', sans-serif;
    height: 100px;
    text-transform: uppercase;
    color: white;
    font-weight: bold;
    text-shadow: 0px 0px 2px #000;
    vertical-align: middle;
    line-height:100px;
    border-left:4px solid blue;
}

.leftNavbar ul li {
    font-family:'Sintony', sans-serif;
    height: 100px;
    text-transform: uppercase;
    color: white;
    font-weight: bold;
    text-shadow: 0px 0px 2px #000;
    vertical-align: middle;
    line-height:100px;
    border-left:4px solid blue;
    margin-bottom:5px;
}