提示：您可以先修改部分代碼再運行
純css+div 變化背景導般菜單代碼<ul id="menu"><li id="home" class="first"><b>Home</b></li><li id="single"><b>Single Level</b></li><li id="dropdown"><b>Dropdown</b></li><li id="dropline"><b>Dropline</b></li><li id="flyout"><b>Flyout</b></li><li id="support"><b>Support</b></li><li id="contact" class="last"><b>Contact</b></li></ul><style>#pad {height:20px;}#menu {padding:0; margin:0; list-style:none; width:700px; height:146px; float:left;}#menu li {position:relative; float:left; margin:0 5px 0 0;}#menu li.last {margin:0;}#menu li a {display:block; height:146px; width:95px; line-height:20px; padding:0; float:left; color:#fff; text-decoration:none; font-family:"trebuchet MS", sans-serif; font-size:18px; text-align:center; cursor:pointer;}#menu li a b {position:relative; top:28px; font-weight:normal;}#menu li#home a {background:http://filesimg.111cn.net/20091217010702727.png);}#menu li#single a {background:http://filesimg.111cn.net/20091217010708179.png);}#menu li#dropdown a {background:http://filesimg.111cn.net/2009121701071468.png);}#menu li#dropline a {background:http://filesimg.111cn.net/20091217010720996.png);}#menu li#flyout a {background:http://filesimg.111cn.net/20091217010726338.png);}#menu li#support a {background:http://filesimg.111cn.net/20091217010732559.png);}#menu li#contact a {background:http://filesimg.111cn.net/20091217010738131.png);}#menu li#home a:hover {background:http://filesimg.111cn.net/20091217010744161.png);}#menu li#single a:hover {background:http://filesimg.111cn.net/20091217010750377.png);}#menu li#dropdown a:hover {background:http://filesimg.111cn.net/20091217010756563.png);}#menu li#dropline a:hover {background:http://filesimg.111cn.net/20091217010802106.png);}#menu li#flyout a:hover {background:http://filesimg.111cn.net/20091217010808746.png);}#menu li#support a:hover {background:http://filesimg.111cn.net/20091217010814187.png);}#menu li#contact a:hover {background:http://filesimg.111cn.net/20091217010820658.png);}.home #menu li#home a {background:http://filesimg.111cn.net/20091217010744161.png);}.single #menu li#single a {background:http://filesimg.111cn.net/20091217010750377.png);}.dropdown #menu li#dropdown a {background:http://filesimg.111cn.net/20091217010756563.png);}.dropline #menu li#dropline a {background:http://filesimg.111cn.net/20091217010802106.png);}.flyout #menu li#flyout a {background:http://filesimg.111cn.net/20091217010808746.png);}.support #menu li#support a {background:http://filesimg.111cn.net/20091217010814187.png);}.contact #menu li#contact a {background:http://filesimg.111cn.net/20091217010820658.png);}/* this is for IE6 png transparency fix - note the image path is from the .html file not the .css file */* html #menu li#home a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='yun_qi_img/20091217010702727.png', sizingMethod='scale');}* html #menu li#single a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='yun_qi_img/20091217010708179.png', sizingMethod='scale');}* html #menu li#dropdown a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='yun_qi_img/2009121701071468.png', sizingMethod='scale');}* html #menu li#dropline a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='yun_qi_img/20091217010720996.png', sizingMethod='scale');}* html #menu li#flyout a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='yun_qi_img/20091217010726338.png', sizingMethod='scale');}* html #menu li#support a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='yun_qi_img/20091217010732559.png', sizingMethod='scale');}* html #menu li#contact a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='yun_qi_img/20091217010738131.png', sizingMethod='scale');}* html #menu li#home a:hover {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='yun_qi_img/20091217010744161.png', sizingMethod='scale');}* html #menu li#single a:hover {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='yun_qi_img/20091217010750377.png', sizingMethod='scale');}* html #menu li#dropdown a:hover {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='yun_qi_img/20091217010756563.png', sizingMethod='scale');}* html #menu li#dropline a:hover {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='yun_qi_img/20091217010802106.png', sizingMethod='scale');}* html #menu li#flyout a:hover {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='yun_qi_img/20091217010808746.png', sizingMethod='scale');}* html #menu li#support a:hover {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='yun_qi_img/20091217010814187.png', sizingMethod='scale');}* html #menu li#contact a:hover {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='yun_qi_img/20091217010820658.png', sizingMethod='scale');}* html .home #menu li#home a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='yun_qi_img/20091217010744161.png', sizingMethod='scale');}* html .single #menu li#single a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='yun_qi_img/20091217010750377.png', sizingMethod='scale');}* html .dropdown #menu li#dropdown a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='yun_qi_img/20091217010756563.png', sizingMethod='scale');}* html .dropline #menu li#dropline a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='yun_qi_img/20091217010802106.png', sizingMethod='scale');}* html .flyout #menu li#flyout a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='yun_qi_img/20091217010808746.png', sizingMethod='scale');}* html .support #menu li#support a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='yun_qi_img/20091217010814187.png', sizingMethod='scale');}* html .contact #menu li#contact a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='yun_qi_img/20091217010820658.png', sizingMethod='scale');}</style>
提示：您可以先修改部分代碼再運行
