css - 导航边框较短但背景颜色已完全突出显示

Question

如何使边框线变短，但是当悬停特定标签时，背景颜色会完全突出显示？谢谢!

此处附上图片:

https://drive.google.com/file/d/0B6FwTbVhsVH9dkxPejZHYXhwU2M/view?usp=sharing

您可能需要看看我在 JSFiddle 上做了什么.

Answer 1

来了

JSFIDDLE

您只需要正确构建 htmlli 比 hover bg 大，并且有边框

.navigation .nav li {
    position: relative;
    display: inline-block;
    color: #FFF;
    margin: 10px 0;
    font-size: 0;
    padding: 10px 0;
}
.navigation .nav li a{
    padding: 10px;
    border-left: 1px solid #6b6b6b;
    font-size: 14px;
    display: block;
    
}

注意

font-size: 0; for nav and then for anchor font-size: 14px; 是因为 display: inline-block 的 bug ; 在元素之间做一些像素间隙。您当然可以使用 float: left; 但您使用了 inline-block 所以我修复了它