Having problems with borders on hovering in my vertical menu - html

Question

I have created a vertical menu and would like it to have a right red border on hover and selected item.
However, I can't seem to get it correct on hovering as my li border bottom seems to mess up the hover state. The bottom border slightly overlaps the right border.
Here is the code in a fiddle.
http://jsfiddle.net/4KBE4/1/
HTML:
<div class="messaging">
<div class="sideMenu">
<ul class="messagesMenu">
<li class="selected">Inbox<span>14</span></li>
<li>Outbox</li>
<li>Address Book</li>
<li>Trash</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;
}​
Hope someone can help! Thanks :)

Answer 1

Give the links display: block, remove their width: 100%, remove the padding, the height and the horizontal borders from the li and add them on the links.
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;
}