hover effect on navigation menu - border issue - html

Question

I need to create a menu same as this image
My problem is the hover state where i need to change the vertical image on both sides.
So far i've come to this point: http://jsfiddle.net/cgEab/
How can i change both left and right images on hover state?
The code for css is
#topmenu{
float: right;
position: relative;
}
ul#topnav {
right: 0px;
margin: 0;
padding: 0;
list-style: none;
font-size: 1em;
background-color: #ccc;
}
ul#topnav li {
float: left;
margin: 0; padding: 0;
}
ul#topnav li a {
padding: 10px 22px;
display: block;
color: #777777;
text-decoration: none;
background-image: url('http://s11.postimg.org/az4oag1in/menu_bar_vertical.jpg');
background-position: right;
background-repeat: no-repeat;
display: block;
}
ul#topnav li a.lastitem {
background-image:none;
}
ul#topnav li a:hover {
color: red;
background-image: url('http://s11.postimg.org/xch0azru7/menu_bar_vertical_hover.jpg');
}
and the html
<link href='http://fonts.googleapis.com/css?family=Dosis:400,700' rel='stylesheet' type='text/css'>
<div id="topmenu">
<ul id="topnav">
<li>HOME</li>
<li>SERVICES</li>
<li>CUSTOMERS</li>
<li>ABOUT US</li>
<li><a class="lastitem" href="#">CONTACT</a></li>
</ul>

Answer 1

I changed the border image to double on both sides and subtracted the margin to correct for position.
http://jsfiddle.net/Q3pQx/
ul#topnav li a {
margin-left:-2px; <-- FIX
padding: 10px 22px;
display: block;
color: #777777;
text-decoration: none;
background-image: url('http://s11.postimg.org/az4oag1in/menu_bar_vertical.jpg');
background-position: right;
background-repeat: no-repeat;
display: block; /* make the link background clickable */
}
ul#topnav li a:hover {
color: red;
background: url('http://s11.postimg.org/xch0azru7/menu_bar_vertical_hover.jpg'), url('http://s11.postimg.org/xch0azru7/menu_bar_vertical_hover.jpg'); <-- FIX
background-position: left top, right top; <-- FIX
background-repeat: no-repeat, no-repeat; <-- FIX
}
Edited the fiddle made some fine tuning http://jsfiddle.net/LhFkf/

Answer 2

'background-image' can take more than one image. So you could try something like this:
background-image: url(...), url(...);
background-position: left, right;

Answer 3

may i sure try this
http://jsfiddle.net/cgEab/7/
CSS
#topmenu{
float: right;
position: relative;
}
ul#topnav {
/* position: absolute;*/
right: 0px;
margin: 0;
padding: 0;
/*width: 640px;*/
list-style: none;
font-size: 1em;
background-color: #ccc;
}
ul#topnav li {
float: left;
margin: 0; padding: 0;
/*border-right: 1px solid #555;*/
}
ul#topnav li a {
padding: 10px 22px;
display: block;
margin-left:-2px;
color: #777777;
text-decoration: none;
background-image: url('http://s11.postimg.org/az4oag1in/menu_bar_vertical.jpg');
background-position: right;
background-repeat: no-repeat;
display: block; /* make the link background clickable */
}
ul#topnav li a.lastitem {
background-image:none;
}
ul#topnav li a:hover {
color: red;
background: url('http://s11.postimg.org/xch0azru7/menu_bar_vertical_hover.jpg'), url('http://s11.postimg.org/xch0azru7/menu_bar_vertical_hover.jpg');
background-position: left top, right top;
background-repeat: no-repeat, no-repeat;
}

Answer 4

I've put the image to the li, before it was on the li a.
This is a css3 hack. I hope you don't have to use IE lower than 8.
#topmenu{
float: right;
position: relative;
}
ul#topnav {
/* position: absolute;*/
right: 0px;
margin: 0;
padding: 0;
/*width: 640px;*/
list-style: none;
font-size: 1em;
background-color: #ccc;
}
ul#topnav li {
float: left;
margin: 0; padding: 0;
background-image: url('http://s11.postimg.org/az4oag1in/menu_bar_vertical.jpg');
background-position: left;
background-repeat: no-repeat;
}
ul#topnav li:hover,
ul#topnav li:hover + li {
background-image: url('http://s11.postimg.org/xch0azru7/menu_bar_vertical_hover.jpg')
/*border-right: 1px solid #555;*/
}
ul#topnav li a {
padding: 10px 22px;
display: block;
color: #777777;
text-decoration: none;
/*background-image: url('http://s11.postimg.org/az4oag1in/menu_bar_vertical.jpg');
background-position: left;
background-repeat: no-repeat;*/
display: block; /* make the link background clickable */
}
ul#topnav li:first-child {
background-image:none;
}
ul#topnav li a:hover{
color: red;
}
Fiddle