CSS Picture Flip Menu _css/html

If the traditional way to make this flip menu, at least need to cut the picture into 10 Starling  hanging  by 螶 s code, in the Picture button on the behavior, now completely with CSS to achieve, the picture as long as a, see the figure below.

CSS code:

#imgmenu {
 width:450px;
 height:25px; /* height is half of the background picture * * * *
 background:url (... /images/navbg.gif);
 List-style-type:none;
 padding:0px;
 margin:0px;
}
 
#imgmenu li{
 float:left;
}
 
#imgmenu Li a{
 display:block;
 width:90px;
 height:25px;
}
 
#imgmenu li#home a:hover, #activeh {
 Background:url (... /images/navbg.gif) 0-25px; 
 /* Flip the position of the background map, the left 0px, top -25px, the
 lower part of the background image, the same as * *
}
 
#imgmenu li#about a:hover, #activea {
 background: URL (.. /images/navbg.gif) -90px-25px;
 /* The position of the second menu is 90px from the left,
 the width of each menu is 90px*/
}
 
#imgmenu li#pro a:hover, #activep {
 Background:url (... /images/navbg.gif) -180px-25px;
}
 
#imgmenu Li#faq a:hover, #activef {
 Background:url (... /images/navbg.gif) -270px-25px;
}
 
#imgmenu li#contact a:hover, #activec {
 Background:url (... /images/navbg.gif) -360px-25px;
}

Designed to be more considerate, take care of the plain text browsing friends:

You can set the span element inside Li, add text links, and make span invisible in style.