I'm looking to replicate a menu design similar to the one shown in this image.
My main issue lies with the hover effect, specifically changing the vertical images on both sides. I've made some progress so far and you can view it here: http://jsfiddle.net/cgEab/
Any suggestions on how I can achieve changing both left and right images on hover?
Here is the CSS code:
#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 here is 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><a href="#">HOME</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">CUSTOMERS</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a class="lastitem" href="#">CONTACT</a></li>
</ul>