Question

我希望在我的网站上使用导航药，但它们会导致背景泄漏。查看此网站上的效果：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;
}

Answer 1

尝试将此添加到您的css：

background-clip: padding-box;

使用border-radius将其添加到任何项目。

以下是您为示例编写更改所需的内容。试过并验证了。

body > header nav li a:hover {
    color: white;
    background-color: #0a6abf;
    background-clip: padding-box;
}

with background-clip

没有背景剪辑

导航药丸背景泄漏

1 个答案: