教程集 > 脚本编程 > javascript > 正文纯CSS导航条下拉菜单代码

纯CSS导航条下拉菜单代码

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

教程集为您提供纯CSS导航条下拉菜单代码等资源，欢迎您收藏本站，我们将为您提供最新的纯CSS导航条下拉菜单代码资源

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

<textarea name="runcool" rows="28" cols="75" >纯CSS导航条下拉菜单代码

<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> #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(http://www.jiaochengji.com/demo/pic/home1.png);} #menu li#single a {background:url(http://www.jiaochengji.com/demo/pic/single1.png);} #menu li#dropdown a {background:url(http://www.jiaochengji.com/demo/pic/dropdown1.png);} #menu li#dropline a {background:url(http://www.jiaochengji.com/demo/pic/dropline1.png);} #menu li#flyout a {background:url(http://www.jiaochengji.com/demo/pic/flyout1.png);} #menu li#support a {background:url(http://www.jiaochengji.com/demo/pic/support1.png);} #menu li#contact a {background:url(http://www.jiaochengji.com/demo/pic/contact1.png);} #menu li#home a:hover {background:url(http://www.jiaochengji.com/demo/pic/home2.png);} #menu li#single a:hover {background:url(http://www.jiaochengji.com/demo/pic/single2.png);} #menu li#dropdown a:hover {background:url(http://www.jiaochengji.com/demo/pic/dropdown2.png);} #menu li#dropline a:hover {background:url(http://www.jiaochengji.com/demo/pic/dropline2.png);} #menu li#flyout a:hover {background:url(http://www.jiaochengji.com/demo/pic/flyout2.png);} #menu li#support a:hover {background:url(http://www.jiaochengji.com/demo/pic/support2.png);} #menu li#contact a:hover {background:url(http://www.jiaochengji.com/demo/pic/contact2.png);} .home #menu li#home a {background:url(http://www.jiaochengji.com/demo/pic/home2.png);} .single #menu li#single a {background:url(http://www.jiaochengji.com/demo/pic/single2.png);} .dropdown #menu li#dropdown a {background:url(http://www.jiaochengji.com/demo/pic/dropdown2.png);} .dropline #menu li#dropline a {background:url(http://www.jiaochengji.com/demo/pic/dropline2.png);} .flyout #menu li#flyout a {background:url(http://www.jiaochengji.com/demo/pic/flyout2.png);} .support #menu li#support a {background:url(http://www.jiaochengji.com/demo/pic/support2.png);} .contact #menu li#contact a {background:url(http://www.jiaochengji.com/demo/pic/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> </textarea>

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

您可能感兴趣的文章：
导航菜单-左则多层树形下拉菜单
 div css 二级下拉菜单导航代码
 jquery 遮罩层效果实现的导航菜单
 jQuery菜单插件 Smooth Navigational Menu
导航菜单-简洁的纯CSS二级下拉菜单
 纯CSS制作的竖向导航菜单
 jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
 jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
 jquery导航固定效果实例
 导航菜单-横竖结合的折叠下拉导航菜单效果

上一篇：div css导航菜单下一篇：Javascript MVVM 框架研究

[关闭]

最近更新

浏览排行

~ ~