css - Cover li right border with a links background -
i'm changing background color of link on horizontal menu, works fine, except i'm putting border-right on li elements, background meets line, looks weird.
how go covering entire line (in essence, need 1 pixel)
much appreciated.
#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 do</span></a></li> <li><a href='how-it-works' id="howitworks_link"><span>how works</span></a></li> <li><a href='contact-us' id="contact_link"><span>contact</span></a></li> </ul> </div>
covering entire screen html,body{margin:0;} not add border li, li #nav_menu li a{ border-right:solid #ff0000; } needs #nav_menu{ overflow:hidden; } hover borders of both sides change #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; }
Comments
Post a Comment