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.