Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Cover li right border with a links background

Cover li right border with a links background

Problem

I'm changing the background color of the a link on a horizontal menu, works fine, except i'm putting a border-right on the li elements, but the background only meets the line, which looks weird.

How do i go about covering the entire line (in essence, i just need one extra 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;
}


Problem courtesy of: user1959409

Solution

 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;
}
Solution courtesy of: Nik Drosakis

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Cover li right border with a links background

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×