apply background over the borders as well - Javascript/CSS

[K-Diskcom]

HTML - Navigation Bar\[code\]<div id="navBar"> <ul class="navBarWidth navBarMain"> <li class="borderRight onSelect"><a href="http://stackoverflow.com/questions/15515776/#">LINK 1</a></li> <li class="borderRight borderLeft"><a href="http://stackoverflow.com/questions/15515776/#">LINK 2</a></li> <li class="borderRight borderLeft"><a href="http://stackoverflow.com/questions/15515776/#">LINK 3</a></li> <li class="borderRight borderLeft"><a href="http://stackoverflow.com/questions/15515776/#">LINK 4</a></li> </ul> <ul class="navBarExtended"> <li class="borderLeft"><a href="http://stackoverflow.com/questions/15515776/#">EXTRA LINK</a></li> </ul></div>\[/code\]CSS - Following are the styles applied\[code\]html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote { padding: 0; margin: 0; font-size: 100%; font-weight: normal;}table { border-collapse: collapse; border-spacing: 0; }td, th, caption { font-weight: normal; text-align: left; }img, fieldset { border: 0; }ol { padding-left: 1.4em; list-style: none; }ul { padding-left: 1.4em; list-style:none; }q:before, q:after { content:''; }#navBar{ width: 100%; position: absolute; line-height: 50px; background: -moz-linear-gradient(top, #0088FF, #0066BF);}.navBarWidth{ width: 960px; margin: 0 auto;}.borderRight{ border-right: 1px solid #005FB3; text-shadow: -1px -1px #0061B6;}.borderLeft{ border-left: 1px solid #4CACFF; text-shadow: -1px -1px #0061B6;}#navBar li{ float: left; }.navBarMain li a{ display: inline-block; vertical-align: top; color: #ffffff; font-size: .8em; text-decoration: none; text-align: center; padding-left: 20px; padding-right: 20px; }.navBarExtended li a{ display: inline-block; vertical-align: top; color: #ffffff; font-size: .8em; text-align: center; padding-left: 20px; padding-right: 20px; }.onHoverMain{ background-color: #3D3C3C; text-shadow: none; box-shadow: inset 0 0 16px #000000; }.navBarExtended li a:hover{ text-decoration: underline;}.onSelect{ border-left: 1px solid #005FB3; background-color: #242424; text-shadow: 0px 1px #000000; box-shadow: inset 0 0 16px #000000;}\[/code\]JAVASCRIPT\[code\]$(function() { $("ul.navBarMain li:not(.onSelect) a").hover( function(){ $(this).addClass("onHoverMain"); }, function(){ $(this).removeClass("onHoverMain"); }); });\[/code\]The bacground on hover is just in-between the borders, want I want to achieve here is it should be applied over the borders as well.