Use CSS to create a flip menu in a webpage

If you use the traditional method to make this flip menu, you need to cut the image into at least 10 blocks, add JS code, and add behavior on the image button. Now it is fully implemented using CSS, you only need one image, as shown in the following figure:
CSS code:

The code is as follows:

Copy code

# Imgmenu { Width: Pixel px; Height: 25px;/* The height is half of the background image */ Background: url (../images/navbg.gif ); List-style-type: none; Padding: 0px; Margin: 0px; } # Imgmenu li { Float: left; } # Imgmenu li { Display: block; Width: 90px; Height: 25px; } # Imgmenu li # home a: hover, # activeh { Background: url (../images/navbg.gif) 0-25px; /* Position of the background image during Flip, 0 px on the left,-25px on the top, The lower part of the background image, the same below */ } # Imgmenu li # about a: hover, # activea { Background: url (../images/navbg.gif)-90px-25px; /* The position of the second menu is 90 PX 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; } XHTML: <Ul id = "imgmenu"> <Li id = "activeh"> <a href = "#"> </a> </li> <Li id = "about"> <a href = "#"> </a> </li> <Li id = "pro"> <a href = "#"> </a> </li> <li id = "faq"> <a href = "#"> </a> </li> <Li id = "contact"> <a href = "#"> </a> </li> </ul>

The design is more considerate, taking care of the friends who browse the plain text: You can set the SPAN element in the LI, add the text link, and set the SPAN invisible in the style.