html - ナビゲーション メニューのホバー効果 - 国境の問題

Question

この画像と同じメニューを作成する必要があります

私の問題は、両側の垂直方向の画像を変更する必要があるホバー状態です。これまでのところ、私はこの時点に来ました: http://jsfiddle.net/cgEab/

ホバー状態で左右の画像を変更するにはどうすればよいですか?

cssのコードは

#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');    
}

そして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>   

Answer 1

これを試してみてもいいですか

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;


    }