<! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en" "http://www.w3.org/TR/html4/loose.dtd" > < Html > < Head > < Meta HTTP-equiv = "Content-Type" Content = "Text/html; charsets = UTF-8" > < Title > Use a double sliding door to implement a three-state glass effect menu </ Title > < Style Type = "Text/CSS" > . Menu ul { Font-family : Arial ; Font-size : 14px ; Padding : 0 0 0 8px ; Margin : 0 auto ; List-style : None ; Height : 35px ; White-space : Nowrap ; // Prevents ie from being broken between the menu items } . Menu ul Li { Float : Left ; Margin : 0 2px ; } . Menu ul Li { Display : Block ; Float : Left ; Line-height : 35px ; Color : #666666 ; Text-Decoration : None ; Padding : 0 0 0 14px ; Background : Url(three-state-navi-background.gif) ; } . Menu ul Li a B { Display : Block ; Padding : 0 14px 0 0 ; Background : Url(three-state-navi-background.gif) No-repeat right top ; } . Menu ul Li A: hover { Color : # Ffffff ; Background : Url(three-state-navi-background.gif) No-repeat left center ; } . Menu ul Li A: hover B { Background : Url(three-state-navi-background.gif) No-repeat right center ; } . Menu ul Li. Current { // Set the color of the menu item of the current page Link : # Ffffff ; Background : Url(three-state-navi-background.gif) No-repeat left bottom ; } . Menu ul Li. Current A B { Background : Url(three-state-navi-background.gif) No-repeat right bottom ; } . Menu ul Li. Current A: hover { Background : Url(three-state-navi-background.gif) No-repeat left bottom ; Cursor : Default ; } . Menu ul Li. Current A: hover B { Background : Url(three-state-navi-background.gif) No-repeat right bottom ; } </ Style > </ Head > < Body > < Div Class = "Menu" > < Ul > < Li > < A Href = "#" > < B > Home </ B > </ A > </ Li > < Li > < A Href = "#" > < B > Connect </ B > </ A > </ Li > < Li > < A Href = "#" > < B > Web Dev </ B > </ A > </ Li > < Li > < A Href = "#" > < B > Web design </ B > </ A > </ Li > < Li Class = "Current" > < A Href = "#" > < B > Map </ B > </ A > </ Li > </ Ul > </ Div > </ Body > </ Html >
Material download: http://files.cnblogs.com/likebeta/201205292523211.zip