html - 在我的垂直菜单中悬停时出现边框问题

Question

我创建了一个垂直菜单，并希望它在悬停和选中的元素上有一个红色的右边框。

但是，我似乎无法在悬停时使其正确，因为我的 li 边框底部似乎弄乱了悬停状态。底部边框与右边框略微重叠。

这是 fiddle 中的代码。

http://jsfiddle.net/4KBE4/1/

HTML:

<div class="messaging">

    <div class="sideMenu"> 
        <ul class="messagesMenu">
            <li class="selected"><a href="#">Inbox<span>14</span></a></li> 
            <li><a href="#">Outbox</a></li> 
            <li><a href="#">Address Book</a></li> 
            <li><a href="#">Trash</a></li> 
        </ul>
    </div> 

    <div class="messagesWrapper">
    </div>

</div>

CSS:

.messaging {
    width: 500px;
    margin-bottom: 20px;
}
.sideMenu {
    display: inline-block;
    width: 200px;
    float: left;    
}
.messagesWrapper {
    background: honeydew;
    width: 300px;
    height: 200px;
    float: right;    
    min-height: 500px;
}
.messagesMenu {
    background: #FFF;
    padding-bottom: 20px;
}
.messagesMenu li {
    padding: 5px;
    border-top: 1px solid #d4d4d4;
    height: 3em;
    display: block;
    position: relative;
    border-right: 5px solid #d4d4d4;
}
.messagesMenu li:first-child { border-top: none; }
.messagesMenu li:last-child { border-bottom: 1px solid #d4d4d4; }
.messagesMenu li a {
    line-height: 3em;
    font-size: 1em;
    text-transform: uppercase;
    text-decoration: none;
    padding-left: 5px;
    color: #c4c4c4;
    cursor: pointer;
}
.messagesMenu li a span {
    color: #FFF;
    font-size: 1em;
    text-transform: uppercase;
    text-decoration: none;
    background: #999;
    border-radius: 5px;
    margin-left: 100px;
    padding: 2px 6px;
}
.messagesMenu li:hover { border-right-color: #ed1c24; }
.messagesMenu li.selected { 
    border-right-color: #ed1c24;
    border-bottom: none;
}
.messagesMenu li.selected a { color: #2f3239; }
.clearfix { zoom: 1; }
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}​

希望有人能帮忙!谢谢:)

Answer 1

给链接 display: block，去掉它们的 width: 100%，去掉 padding，height 和 horizo​​ntal 与 li 的边界并将它们添加到链接上。

demo

.messagesMenu li { border-right: 5px solid #d4d4d4; }
.messagesMenu li:first-child a { border-top: none; }
.messagesMenu li:last-child a { border-bottom: 1px solid #d4d4d4; }
.messagesMenu li a {
    display: block;
    line-height: 3em;
    font-size: 1em;
    text-transform: uppercase;
    text-decoration: none;
    color: #c4c4c4;
    cursor: pointer;
    height: 3em;
    padding: 5px 5px 5px 10px;
    border-top: 1px solid #d4d4d4;
}