CSS just did not have a thing, made a; Do not know how to fit the standard! CSS code is not optimized, may write a bit more! But in IE and Firefox have been tested; no problem; Oh
CSS code (not optimized):
Program code
Body:
Program code
HTML code <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "><ptml xmlns=" http://www.w3.org/1999/xhtml "><pead><meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/><title> Mouse-css Navigation example </title><style>/* www.zishu.cn mouse */#menu {font-family:arial , Helvetica, Sans-serif; font-size:12px; border:1px solid #000000; width:200px; Background-color: #FF9D1F; Text-align:center;} #menub {margin:20px;}. w1{margin:3px border-top:1px Solid #FFC881 border-right:1px solid #EE8600 border-bottom:1px solid #EE8600 Border-lef t:1px solid #FFC881; w2{border-top:1px solid #EE8600 border-right:1px solid #FFAD42 border-bottom:1px solid #FFAD42 border-left:1px Solid EE8600}. w3{border-top:2px solid #D07500 border-right:2px solid #FFB85D border-bottom:2px solid #FFB85D border-left:2px Solid D07500}. w4{border:1px solid #FC8E00; w5{border:1px solid #000000; w7{border-top:1px Solid #FFDCAF; border-right:1px solid #C87000; border-bottom:1px solid #C87000; border-left:1px solid #FFDCAF; w8{border-top:1px solid #FFD7A4 border-right:1px solid #FF9204 border-bottom:1px solid #FF9204 border-left:1px Solid FFD7A4}. w9{background: #FFC881; border-top:1px solid #FECE8F border-right:1px solid #FFAE44 border-bottom:1px solid #FFAE44; bo rder-left:1px solid #FECE8F; #menu a{color: #884C00; text-decoration:none; font-weight:bold;} #menu a:hover{background: #FFB85D; color: #000000;} #menu a:hover. W7 {border-top:1px solid #C87000; border-right:1px solid #FFDCAF; border-bottom:1px solid #FFDCAF; border- left:1px solid #C87000;} #menu a:hover. W8 {border-top:1px solid #FF9204; border-right:1px solid #FFD6A1; border-bottom:1px solid #FFD6A1; border- left:1px solid #FF9204;} #menu a:hover. W9 {background: #FFB85D; border-top:1px solid #FFAE44; border-right:1px solid #FECF91; border-bottom:1px so Lid #FECF91; border-left:1px solid #FFAE44; }</style></head><body><!--www.zishu.cn Mouse--><div id= "menu" > <div id= "menub" > <div class= "W1" > <div class = "W2" > <div class= "W3" > <div class= "W4" > <div class= "W5" > <a href= "http ://www.zishu.cn "target=" _blank "> <div class=" W7 "> <div class=" W8 "> <div class= "W9" > www.zishu.cn </div> </div> </div> </a> </div> </div> </div> </div> </div> <div class= "W1" & Gt <div class= "W2" > <div class= "W3" > <div class= "W4" > <div class= "W5" > A href= "http://www.zishu.cn" target= "_blank" > <div class= "W7" > <div class= "W8" ; <div class= "W9" > www.zishu.cn </div> </div> </div> ≪/a> </div> </div> </div> </div> </div> <div class= "W1" ; <div class= "W2" > <div class= "W3" > <div class= "W4" > <div class= "W5" > A href= "http://www.zishu.cn" target= "_blank" > <div class= "W7" > <div class= "W8" ; <div class= "W9" > www.zishu.cn </div> </div> </div> </a > </div> </div> </div> </div> </div> <div class= "W1" > <div class= "W2" > <div class= "W3" > <div class= "W4" > <div class= "W5" > <a href= "http://www.zishu.cn" target= "_blank" > <div class= "W7" > <div class= "W8" > <div class= "W9" > www.zishu.cn </div> </div> </div> </a> </div> </div> </div> </div> </div> & Lt;div class= "W1" > <div class= "W2" > <div class= "W3" > <div class= "W4" > <div class= "W5" > <a href= "http://www.zishu.cn" target= "_blank" > <div class= "W7" > <div class= "W8" > <div class= "W9" > www.zishu.cn </div> </div> </div> </a> </div> </div> </div> </div> ; </div> </div></div></body></html>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]
The following are optimized CSS code:
Program code #menu{font-family:arial, Helvetica, sans-serif;font-size:12px;border:1px solid #000; width:200px; background: # Ff9d1f;text-align:center;}
. w1,.w2,.w4,.w5,.w7,.w8,.w9{border:1px Solid;}
#menub {margin:20px;}
. W1{border-color: #FFC881 #EE8600 #EE8600 #FFC881; margin:3px;}
. W2{border-color: #EE8600 #FFAD42 #FFAD42 #EE8600;}
. W3{border-color: #D07500 #FFB85D #FFB85D #D07500; border-width:2px;border-style:solid;}
. W4{border-color: #FC8E00;}
. W5{border-color: #000;}
. W7{border-color: #FFDCAF #C87000 #C87000 #FFDCAF;}
. W8{border-color: #FFD7A4 #FF9204 #FF9204 #FFD7A4;}
. W9{border-color: #FECE8F #FFAE44 #FFAE44 #FECE8F; background: #FFC881;}
#menu a{color: #884C00; text-decoration:none;font-weight:bold;}
#menu a:hover{color: #000;}
#menu a:hover. W7 {border-color: #C87000 #FFDCAF #FFDCAF #C87000;}
#menu a:hover. W8 {border-color: #FF9204 #FFD6A1 #FFD6A1 #FF9204;}
#menu a:hover. W9 {border-color: #FFAE44 #FECF91 #FECF91 #FFAE44; background: #FFB85D;}
Reprint please indicate the source: http://www.zishu.cn Mouse
