css - Nav Pills バックグラウンド リーク

Question

Web サイトでナビゲーション ピルを使用しようとしていますが、バックグラウンド リークが発生しています。この Web サイトで効果を確認してください: http://oleb.net/blog/2011/12/tutorial-how-to-sort-and-group-uitableview-by-date/ . 問題を確認するには、錠剤に何度もカーソルを合わせます。丸薬の輪郭が現れているのがわかります。
これが私が試したコードです：

    .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;
    }

アウトラインが表示されないようにするにはどうすればよいですか? ありがとう！

編集： 試したコード：

.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;
}