教程集 > 脚本编程 > javascript > 正文纯css div 变化背景导般菜单代码

纯css div 变化背景导般菜单代码

发布时间：2016-10-24 编辑：jiaochengji.com

教程集为您提供纯css div 变化背景导般菜单代码等资源，欢迎您收藏本站，我们将为您提供最新的纯css div 变化背景导般菜单代码资源

提示：您可以先修改部分代码再运行

<textarea name="runcool" rows="28" cols="75" >纯css div 变化背景导般菜单代码 <ul id="menu"> <li id="home" class="first">Home</li> <li id="single">Single Level</li> <li id="dropdown">Dropdown</li> <li id="dropline">Dropline</li> <li id="flyout">Flyout</li> <li id="support">Support</li> <li id="contact" class="last">Contact</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.jiaochengji.com/20091217010702727.png);} #menu li#single a {background:http://filesimg.jiaochengji.com/20091217010708179.png);} #menu li#dropdown a {background:http://filesimg.jiaochengji.com/2009121701071468.png);} #menu li#dropline a {background:http://filesimg.jiaochengji.com/20091217010720996.png);} #menu li#flyout a {background:http://filesimg.jiaochengji.com/20091217010726338.png);} #menu li#support a {background:http://filesimg.jiaochengji.com/20091217010732559.png);} #menu li#contact a {background:http://filesimg.jiaochengji.com/20091217010738131.png);} #menu li#home a:hover {background:http://filesimg.jiaochengji.com/20091217010744161.png);} #menu li#single a:hover {background:http://filesimg.jiaochengji.com/20091217010750377.png);} #menu li#dropdown a:hover {background:http://filesimg.jiaochengji.com/20091217010756563.png);} #menu li#dropline a:hover {background:http://filesimg.jiaochengji.com/20091217010802106.png);} #menu li#flyout a:hover {background:http://filesimg.jiaochengji.com/20091217010808746.png);} #menu li#support a:hover {background:http://filesimg.jiaochengji.com/20091217010814187.png);} #menu li#contact a:hover {background:http://filesimg.jiaochengji.com/20091217010820658.png);} .home #menu li#home a {background:http://filesimg.jiaochengji.com/20091217010744161.png);} .single #menu li#single a {background:http://filesimg.jiaochengji.com/20091217010750377.png);} .dropdown #menu li#dropdown a {background:http://filesimg.jiaochengji.com/20091217010756563.png);} .dropline #menu li#dropline a {background:http://filesimg.jiaochengji.com/20091217010802106.png);} .flyout #menu li#flyout a {background:http://filesimg.jiaochengji.com/20091217010808746.png);} .support #menu li#support a {background:http://filesimg.jiaochengji.com/20091217010814187.png);} .contact #menu li#contact a {background:http://filesimg.jiaochengji.com/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='http://filesimg.jiaochengji.com/20091217010702727.png', sizingMethod='scale');} * html #menu li#single a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://filesimg.jiaochengji.com/20091217010708179.png', sizingMethod='scale');} * html #menu li#dropdown a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://filesimg.jiaochengji.com/2009121701071468.png', sizingMethod='scale');} * html #menu li#dropline a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://filesimg.jiaochengji.com/20091217010720996.png', sizingMethod='scale');} * html #menu li#flyout a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://filesimg.jiaochengji.com/20091217010726338.png', sizingMethod='scale');} * html #menu li#support a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://filesimg.jiaochengji.com/20091217010732559.png', sizingMethod='scale');} * html #menu li#contact a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://filesimg.jiaochengji.com/20091217010738131.png', sizingMethod='scale');} * html #menu li#home a:hover {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://filesimg.jiaochengji.com/20091217010744161.png', sizingMethod='scale');} * html #menu li#single a:hover {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://filesimg.jiaochengji.com/20091217010750377.png', sizingMethod='scale');} * html #menu li#dropdown a:hover {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://filesimg.jiaochengji.com/20091217010756563.png', sizingMethod='scale');} * html #menu li#dropline a:hover {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://filesimg.jiaochengji.com/20091217010802106.png', sizingMethod='scale');} * html #menu li#flyout a:hover {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://filesimg.jiaochengji.com/20091217010808746.png', sizingMethod='scale');} * html #menu li#support a:hover {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://filesimg.jiaochengji.com/20091217010814187.png', sizingMethod='scale');} * html #menu li#contact a:hover {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://filesimg.jiaochengji.com/20091217010820658.png', sizingMethod='scale');} * html .home #menu li#home a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://filesimg.jiaochengji.com/20091217010744161.png', sizingMethod='scale');} * html .single #menu li#single a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://filesimg.jiaochengji.com/20091217010750377.png', sizingMethod='scale');} * html .dropdown #menu li#dropdown a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://filesimg.jiaochengji.com/20091217010756563.png', sizingMethod='scale');} * html .dropline #menu li#dropline a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://filesimg.jiaochengji.com/20091217010802106.png', sizingMethod='scale');} * html .flyout #menu li#flyout a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://filesimg.jiaochengji.com/20091217010808746.png', sizingMethod='scale');} * html .support #menu li#support a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://filesimg.jiaochengji.com/20091217010814187.png', sizingMethod='scale');} * html .contact #menu li#contact a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://filesimg.jiaochengji.com/20091217010820658.png', sizingMethod='scale');} </style></textarea>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
纯css div 变化背景导般菜单代码
 对css滑动门技术的一些总结和归纳
 jquery 遮罩层效果实现的导航菜单
 7款风格新颖的jQuery/CSS3菜单导航分享
 CSS实现导航条图片的翻转菜单
 css div布局的好处与优势是什么？
纯CSS打造的导航菜单(附jquery版)
jQuery渐变发光导航菜单的实例代码
 CSS3制作动画效果例子
 jquery遮罩层效果实现导航菜单代码

上一篇：鼠标菜单下拉导航菜单代码下一篇：js 下拉菜单

[关闭]

纯css div 变化背景导般菜单代码

最近更新

浏览排行