頂部和底部邊框突出顯示的垂直列表

我正在開發一個包含四個項目的列表。每個項目都需要有一個頂部和底部邊框，默認爲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