Question

我正在改变水平菜单上链接的背景颜色，工作正常，除了我在li元素上放置一个右边框，但背景只符合线条，这看起来很奇怪。

如何覆盖整条线（实质上，我只需要一个额外的像素）

非常感谢。

#nav_menu{
    height:57px;
    background:#55d2f3;
    font-family:calibri;
    text-shadow: 1px 1px 0px #9c9a9a;
    font-size:16px;
    color:white;
    font-weight:100;
    margin:0;
    padding:0;
}

#nav_menu ul{font-size:0;list-style: inside;padding:0;margin:0;}
#nav_menu ul li{
    display: inline;
    list-style-type: none;
    line-height:60px;
    list-style-position:inside;
    font-size:16px;
    border-right:1px solid white;
}

#nav_menu li a{
    display:inline-block;
    text-decoration: none;
    color:white;
    height:57px;
    padding:0 15px 0 15px;
}

#nav_menu li a:hover{
    background:white;
    color:#555;
    text-shadow: 1px 1px 0px whitesmoke;
}

<div id='nav_menu'>
    <ul>
        <li ><a href='pricing' id="pricing_link" ><span>Pricing</span></a></li>
        <li><a href='what-we-do' id="whatwedo_link"><span>What we do</span></a></li>
        <li><a href='how-it-works' id="howitworks_link"><span>How it works</span></a></li>
        <li><a href='contact-us' id="contact_link"><span>Contact</span></a></li>
    </ul>
</div>

Answer 1

 covering the entire screen with
 html,body{margin:0;}
 Do not add the border to the li, but to the li a  
  #nav_menu li a{
    border-right:solid #ff0000;
  }
also needs 
#nav_menu{
    overflow:hidden;
}


to hover the borders of both sides change to

#nav_menu li a:hover{
    background:white;
    color:#555;
    text-shadow: 1px 1px 0px whitesmoke;
    margin-left:-3px;
border-right:solid #55d2f3;
border-left:solid #55d2f3;
}

用链接背景覆盖li右边框

1 个答案: