教程集 > 脚本编程 > javascript > 正文 css下拉菜单导航条

css下拉菜单导航条

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

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

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

<textarea name="runcool" rows="28" cols="75" >css下拉菜单导航条 <ul id="menu"> <li id="home">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">Contact</li> </ul> <style> #pad {height:100px;} #menu {padding:0; margin:0; list-style:none;} #menu li {float:left; margin-left:1px; padding-top:2px;} #menu li a {display:block; height:36px; line-height:36px; padding:0 25px 0 0; float:left; background: url(/blog/upload/image/20091218073933.gif) no-repeat right top; color:#ddd; text-decoration:none;} #menu li a b {display:block; height:36px; float:left; padding:0 0 0 25px; background: url(http://www.jiaochengji.com/blog/upload/image/20091218073949.gif) left top; cursor:pointer;} #menu li a:hover, #menu li a:active, #menu li a:focus, .home #menu li#home a, .single #menu li#single a, .dropdown #menu li#dropdown a, .dropline #menu li#dropline a, .flyout #menu li#flyout a, .support #menu li#support a, .contact #menu li#contact a {background-position:right -36px; line-height:34px; color:#fff;} #menu li a:hover b, #menu li a:active b, #menu li a:focus b, .home #menu li#home a b, .single #menu li#single a b, .dropdown #menu li#dropdown a b, .dropline #menu li#dropline a b, .flyout #menu li#flyout a b, .support #menu li#support a b, .contact #menu li#contact a b {background-position:left -36px;} </style></textarea>

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

您可能感兴趣的文章：
导航菜单-左则多层树形下拉菜单
 jquery 遮罩层效果实现的导航菜单
 div css 二级下拉菜单导航代码
 jQuery菜单插件 Smooth Navigational Menu
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
 CSS Dock Menu
7款风格新颖的jQuery/CSS3菜单导航分享
 jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
 收集于网络的Web Standard规范化CSS XHTML命名参考
 导航菜单-横竖结合的折叠下拉导航菜单效果

上一篇：css 导航菜单代码下一篇：javascript 经典导航菜单代码

[关闭]

css下拉菜单导航条

最近更新

浏览排行