提示：您可以先修改部分代碼再運行
<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>純CSS垂直導覽功能表</title><style>#menu1 {width: 200px;float:left;}#menu1 ul{font-family: Arial, Helvetica, sans-serif;list-style-type:none;margin:0;padding:0;}#menu1 li{display: inline;}#menu1 a{color: #fff;text-decoration: none;font-size: 14px;display: block;padding: 3px;width: 160px;background-color: #686C7A;border-bottom: 1px solid #eee;}#menu1 a:link, #menu a:visited{color: #EEE;text-decoration: none;}#menu1 a:hover{background-color: #00BEE4;color: #fff;}#menu1 li a#current{border-bottom: 3px solid #DAD6B7;background: #00BEE4;}#menu2 {width: 200px;float:left;}#menu2 ul{font-family: Arial, Helvetica, sans-serif;list-style-type:none;margin:0;padding:0;}#menu2 li{display: inline;/* for IE5 and IE6 */}#menu2 a{color: #483000;text-decoration: none;font-size: 14px;display: block;padding: 3px;width: 160px;background-color: #F0F0D8;border-bottom: 1px solid #fff;}#menu2 a:link, #menu a:visited{color: #483000;text-decoration: none;}#menu2 a:hover{background-color: #487890 ;color: #fff;}#menu2 li a#current{border-bottom: 3px solid #C0C018;background: #487890 ;color: #fff;}#menu3 {width: 200px;float:left;}#menu3 ul{font-family: Arial, Helvetica, sans-serif;list-style-type: circle;list-style-position:inside;margin:0;padding:0;}#menu3 li{display: inline;/* for IE5 and IE6 */}#menu3 a{color: #483000;text-decoration: none;font-size: 14px;display: block;padding: 3px;width: 160px;background-color: #fff;border-bottom: 1px solid #fff;}#menu3 a:link, #menu3 a:visited{color: #483000;text-decoration: none;}#menu3 a:hover{border-left: 3px solid #901818;color: #000;}#menu3 li a#current{border-left: 3px solid #901818;background: #F0F0F0;color: #000;}/* Menu 3 ends here *//* Menu 4 starts here */#menu4 {width: 200px;float:left;}#menu4 ul{font-family: Arial, Helvetica, sans-serif;list-style-type:none;margin:0;padding:0;}#menu4 li{display: inline;/* for IE5 and IE6 */margin:0px 0px 2px 0px;}#menu4 a{color: #000;text-decoration: none;font-size: 14px;display: block;padding: 3px;width: 160px;background-color: #FDFCF3;border: 1px dotted #B5E3C7;margin:0px 0px 2px 0px;}#menu4 a:link, #menu4 a:visited{color: #000;text-decoration: none;}#menu4 a:hover{background-color: #B5E3C7 ;color: #FDFCF3;}#menu4 li a#current{border: 1px solid #B5E3C7;background: #B5E3C7 ;color: #FDFCF3;}/* Menu 4 ends here */</style></head><body><div id="menu1"><ul><li>Item one</li><li>Item two</li><li>Item three</li><li>Item four</li><li>Item five</li></ul></div><div id="menu2"><ul><li>Item one</li><li>Item two</li><li>Item three</li><li>Item four</li><li>Item five</li></ul></div><div ><br /><br /></div><div id="menu3"><ul><li>Item one</li><li>Item two</li><li>Item three</li><li>Item four</li><li>Item five</li></ul></div><div id="menu4"><ul><li>Item one</li><li>Item two</li><li>Item three</li><li>Item four</li><li>Item five</li></ul></div></body></html></td> </tr></table>
提示：您可以先修改部分代碼再運行
