Nav Pills Background Leak - css

Question

I am looking to use navigation pills on my website, but they are resulting in a background leak. See the effect on this website: http://oleb.net/blog/2011/12/tutorial-how-to-sort-and-group-uitableview-by-date/. Hover over the pills multiple times to see the issue. You can see the outline of the pills appear.
Here is the code that I tried:
.navigation-main {
border-top: 1px solid rgba(0,0,0,0.1);
padding-top: 5px;
clear: both;
display: block;
font: 700 13px/1.3076923076 Lato, sans-serif;
letter-spacing: .05em;
text-transform: uppercase;
width: 100%;
}
.navigation-main .menu {
max-width: 1272px;
margin: 0 auto;
}
.navigation-main ul {
list-style: none;
margin: 0;
padding-left: 0;
text-align: center;
}
.navigation-main li {
display: inline-block;
position: relative;
width: 100px;
}
.navigation-main li:after {
content: none;
display: block;
font-size: 11px;
margin-top: -4px;
vertical-align: middle;
}
.navigation-main li:last-child:after {
content: none;
}
.navigation-main a {
display: block;
line-height: 2.6153846153;
padding: 0 10px;
text-decoration: none;
white-space: nowrap;
}
.navigation-main ul ul {
background-color: #000;
display: none;
float: left;
position: absolute;
top: 2.6153846153em;
left: 0;
text-align: left;
z-index: 99999;
}
.navigation-main li li {
display: block;
}
.navigation-main li li:after {
content: "";
display: block;
margin: 0;
}
.navigation-main ul ul ul {
left: 100%;
top: 0;
}
.navigation-main ul ul a {
color: #fff;
line-height: 1.3076923076;
padding: .6153846153em 10px .6923076923em;
white-space: normal;
width: 170px;
}
.navigation-main ul ul a:hover {
background-color: #333;
color: #fff;
}
.navigation-main ul li:hover > ul {
display: block;
}
/* This is where the pill happens */
.navigation-main a:hover,
.navigation-main li.current_page_item > a,
.navigation-main li.current-menu-item > a {
border-radius: 4px;
color: #FFFFFF;
background-color: #000;
}
How do I stop the outline from appearing? Thanks!
Edit:
Code tried:
.navigation-main li {
display: inline-block;
position: relative;
border-radius: 6px;
width: 100px;
.navigation-main a:hover,
.navigation-main li.current_page_item > a,
.navigation-main li.current-menu-item > a {
border-radius: 4px;
color: #FFFFFF;
background-color: #000;
background-clip: padding-box;
}

Answer 1

Try adding this to your css:
background-clip: padding-box;
Add it to any item using border-radius.
Here is exactly what you need to write change for your example. Tried and verified.
body > header nav li a:hover {
color: white;
background-color: #0a6abf;
background-clip: padding-box;
}
with background-clip
without background-clip