I have created CSS menu bar for my webpage. But Left side border is

Question

0

Asked: June 14, 20262026-06-14T12:08:34+00:00 2026-06-14T12:08:34+00:00

I have created CSS menu bar for my webpage. But Left side border is

0

I have created CSS menu bar for my webpage. But Left side border is not displaying when some one move mouse on “My Presentations” link. Currently “My Favorite” link is selected. Please notice Left side gray border is not displaying on “My Favorite” link. But when u move mouse on “Friend’s Favorite” link then right side border in displaying on “My Favorite” link. I need to display left side border to.

Here is the link:-
jsFiddle Link

 <ul class="menu" style="margin-top:20px;">
    <li><a href="#">Home</a></li>
    <li><a href="my-presentations.htm">My Presentations</a></li>
    <li class="current"><a href="myFavorite.htm">My Favorite</a></li>
    <li><a href="#">Friend's Favorite</a></li>
    <li><a href="#">Most Viewed</a></li>
    <li><a href="#">Sync account</a></li>
</ul>

  /* NAVBAR CSS START HERE */     
.menu,.menu ul,.menu li,.menu a {margin: 0;padding: 0;border: none;outline: none;}
.menu {height: 30px;width: 759px;background: #3B5998;border:1px solid #e1e1e1; border-top-left-radius:5px;-moz-border-radius-topleft:5px; border-top-right-radius:5px;-moz-border-radius-topright:5px}
.menu li {position: relative;list-style: none;float: left;display: block;height: 30px;}
.menu ul { display: none;}
.menu li a{display: block;padding: 0 14px;line-height: 30px;text-decoration: none;font-family: Tahoma;font-weight: bold;font-size: 11px;color: #f9f9f9;border-left:1px solid #8698C0;}
.menu li:hover > a{ color: #9a9a9a; background:#fff; border-left:1px solid #ccc;}
.menu li a.first{border-left:0px; background:#ffvv00;}
.menu li.current a{border:0px; height:31px;color: #9a9a9a; background:#fff; margin-top:-3px; padding-top:3px; padding-bottom:4px;border-top-left-radius:5px;-moz-border-radius-topleft:5px; border-top-right-radius:5px;-moz-border-radius-topright:5px;} 
.menu li:first-child a:hover{border-top-left-radius:5px;-moz-border-radius-topleft:5px; border-right:1px #ccc solid; margin-right:-1px;}
.menu li:last-child a{border-right: none; }