Bharat Negi Bharat Negi - 1 month ago 9
CSS Question

css menu border animation not working properly

i have one problem. we make one menu bar with line animation on hover effect but this animation not proper work in safari 5.1.7 and also some error on chrome web browser, like when we hover any link forth menu line is blink also some tiny 1px with white color dot is also there:-

Html Code:-

<nav id="bannerNav">
<ul>
<li class="active"><a href="who-we-are.html"><span>Menu Bar 1</span> <b></b></a></li>
<li><a href="our-group-companies.html"><span>Menu Bar 2</span> <b></b></a></li>
<li><a href="annual-report.html"><span>Menu Bar 3</span> <b></b></a></li>
<li><a href="social-responsibility.html"><span>Menu Bar 4</span> <b></b></a></li>
<li><a href="media-news.html"><span>Menu Bar 5</span></a></li>
</ul>
</nav>


Css code:-

body{background-color: #000000;}
#bannerNav{margin-top: 26px; float: right;}
#bannerNav ul{float: right; margin: 0; padding: 0; font-size: 17px;}
#bannerNav ul li{float: left; margin: 0; position: relative; list-style: none; }
#bannerNav ul li a{color: #ffffff; padding: 7px 10px; border: solid 1px rgba(0,0,0,0); margin-left: -3px;}
#bannerNav ul li b{background: #fff; color: #fff; height: 15px; right:0px; position: absolute; top: 9px; width: 1px;}
#bannerNav ul li:hover b, #bannerNav ul li.active b{display: none;}


please see full working code here:- Jsfiddle

Answer

you can add backface-visibility to line #bannerNav ul li a and will be fixed at Chrome, this the line edited:

#bannerNav ul li a{color: #ffffff; padding: 7px 10px; border: solid 1px rgba(0,0,0,0); margin-left: -3px;backface-visibility: hidden;-webkit-backface-visibility: hidden;}