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

Popular posts from this blog

ios - iPhone/iPad different view orientations in different views , and apple approval process -

php - HTTP_REFERER woes: How can I allow access to a specific page, only when a visitor has visited another specific page beforehand? -

java Extracting Zip file -