CSS image flip menu

If you use the traditional method to create this flip menu, you must at least cut the image into 10 bytes and then upload the image to ipvs.CodeAdd behavior on the image button. Now CSS is fully used for implementation. You only need one image. See.

CSS 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 a {display: block; width: 90px; Height: 25px; }# imgmenu li # Home A: hover, # activeh {Background: URL (.. /images/navbg.gif) 0-25px;/* the position of the background image when the image is flipped. The left side is 0px, the top is-25px, and the lower part of the background image is. */} # imgmenu li # About: 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 ;}

The design is more considerate and takes care of the friends who browse the plain text:

You can set the span element in Li and add a text link to make the span invisible in the style.