提示：您可以先修改部分代碼再運行
純CSS導航條下拉式功能表代碼<div id="menuContainer"><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></div><style>#menu {padding:0; margin:0; list-style:none; width:700px; height:127px; float:right;}#menu li {position:relative; float:left; margin:0 0 0 -14px;}#menu li a {display:block; height:127px; width:114px; 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 {display:block; height:0; padding-top:127px; overflow:hidden;}#menu li#home a {background:url(yun_qi_img/home1.png);}#menu li#single a {background:url(yun_qi_img/single1.png);}#menu li#dropdown a {background:url(yun_qi_img/dropdown1.png);}#menu li#dropline a {background:url(yun_qi_img/dropline1.png);}#menu li#flyout a {background:url(yun_qi_img/flyout1.png);}#menu li#support a {background:url(yun_qi_img/support1.png);}#menu li#contact a {background:url(yun_qi_img/contact1.png);}#menu li#home a:hover {background:url(yun_qi_img/home2.png);}#menu li#single a:hover {background:url(yun_qi_img/single2.png);}#menu li#dropdown a:hover {background:url(yun_qi_img/dropdown2.png);}#menu li#dropline a:hover {background:url(yun_qi_img/dropline2.png);}#menu li#flyout a:hover {background:url(yun_qi_img/flyout2.png);}#menu li#support a:hover {background:url(yun_qi_img/support2.png);}#menu li#contact a:hover {background:url(yun_qi_img/contact2.png);}.home #menu li#home a {background:url(yun_qi_img/home2.png);}.single #menu li#single a {background:url(yun_qi_img/single2.png);}.dropdown #menu li#dropdown a {background:url(yun_qi_img/dropdown2.png);}.dropline #menu li#dropline a {background:url(yun_qi_img/dropline2.png);}.flyout #menu li#flyout a {background:url(yun_qi_img/flyout2.png);}.support #menu li#support a {background:url(yun_qi_img/support2.png);}.contact #menu li#contact a {background:url(yun_qi_img/contact2.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='/demo/pic/home1.png', sizingMethod='scale');}* html #menu li#single a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/demo/pic/single1.png', sizingMethod='scale');}* html #menu li#dropdown a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/demo/pic/dropdown1.png', sizingMethod='scale');}* html #menu li#dropline a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/demo/pic/dropline1.png', sizingMethod='scale');}* html #menu li#flyout a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/demo/pic/flyout1.png', sizingMethod='scale');}* html #menu li#support a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/demo/pic/support1.png', sizingMethod='scale');}* html #menu li#contact a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/demo/pic/contact1.png', sizingMethod='scale');}* html #menu li#home a:hover {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/demo/pic/home2.png', sizingMethod='scale');}* html #menu li#single a:hover {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/demo/pic/single2.png', sizingMethod='scale');}* html #menu li#dropdown a:hover {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/demo/pic/dropdown2.png', sizingMethod='scale');}* html #menu li#dropline a:hover {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/demo/pic/dropline2.png', sizingMethod='scale');}* html #menu li#flyout a:hover {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/demo/pic/flyout2.png', sizingMethod='scale');}* html #menu li#support a:hover {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/demo/pic/support2.png', sizingMethod='scale');}* html #menu li#contact a:hover {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/demo/pic/contact2.png', sizingMethod='scale');}* html .home #menu li#home a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/demo/pic/home2.png', sizingMethod='scale');}* html .single #menu li#single a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/demo/pic/single2.png', sizingMethod='scale');}* html .dropdown #menu li#dropdown a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/demo/pic/dropdown2.png', sizingMethod='scale');}* html .dropline #menu li#dropline a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/demo/pic/dropline2.png', sizingMethod='scale');}* html .flyout #menu li#flyout a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/demo/pic/flyout2.png', sizingMethod='scale');}* html .support #menu li#support a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/demo/pic/support2.png', sizingMethod='scale');}* html .contact #menu li#contact a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/demo/pic/contact2.png', sizingMethod='scale');}</style>
提示：您可以先修改部分代碼再運行
