顶部和底部边框突出显示的垂直列表

我正在开发一个包含四个项目的列表。每个项目都需要有一个顶部和底部边框，默认为1px纯灰色。这是一个javascript roator，它将为选定的列表元素添加一个“高亮显示”类。选定的列表元素必须是2px纯蓝色。没有被选中时，我有旋转工作和基本造型。我试图申请第二类与jquery（infoHighlighted）超过边界，但这似乎并不奏效。此外，我被困在如何从前面的元素中删除灰底部边界...我知道这应该是简单的我只是无法包裹我的头。顶部和底部边框突出显示的垂直列表

编辑 - 为了澄清，突出问题现在解决了感谢哈代Hazen。我最后一个问题是，先前的列表元素下边框需要被删除，以便高亮区没有先前的元素1px下方的灰色边框。

.sideBox { 
    width: 225px; 
    float: right; 

} 

.sidebox ul { 

    list-style: none; 
    margin: 0; 
    padding: 0; 
    text-indent: 0; 
} 

.sidebox li { 
    height:124px; 
    margin: 0; 
    padding: 0; 
    border-bottom: 1px solid #666; 
} 


.sidebox li:first-child{ 
    height:123px; 
    border-top: 1px solid #666; 
    border-bottom: 1px solid #666; 
} 

.sidebox h4, .sidebox p 
{ 
    margin: 0; 
    color: #707070; 
    padding:0; 
    font-size: 25px; 
} 

.infoHighlighted { 
    border-top: 2px solid #00A4E4;  
    border-bottom: 2px solid #00A4E4;  
} 
.infoHighlighted h4 { 
    color: #00A4E4; 
    font-family: Georgia; 
    font-size: 25px; 
} 
    <div class="sideBox"> 
        <ul> 
         <li id="infoBox_0" class="infoHighlighted"><h4>Header Here</h4><p>One Sentence</p></li> 
         <li id="infoBox_1"><h4>Header Here</h4><p>One Sentence</p></li> 
         <li id="infoBox_2"><h4>Header Here</h4><p>One Sentence</p></li> 
         <li id="infoBox_3"><h4>Header Here</h4><p>One Sentence</p></li> 
        </ul> 
       </div>

来源

2011-01-10 CogitoErgoSum