0

水平メニューのリンクの背景色を変更していますが、li 要素に右の境界線を設定していることを除いて、正常に動作しますが、背景が線にしか合わず、奇妙に見えます。

行全体をカバーするにはどうすればよいですか (本質的に、余分なピクセルが 1 つだけ必要です)。

とても有難い。

#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>
4

1 に答える 1

0 
 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;
}
于 2013-04-06T11:06:38.707 に答える