CSS Picture Rollover Menu _css/html

If you use the traditional method to make this flip menu, at least the picture needs to be cut into 10 starling by 螶 s code, in the Picture button and then add the behavior, now fully implemented with CSS, the picture as long as one, see.

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 {b Ackground:url (.. /images/navbg.gif) 0-25px;  /* Position of background map when flipped, left 0px, top -25px, bottom half of background, below */} #imgmenu li#about a:hover, #activea {background:url (. /images/navbg.gif) -90px-25px; /* The position of the second menu is 90px from the left and 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 thoughtful, take care of plain text browsing friends:

You can nest span elements within Li, add text links, and set span in style to be invisible.

