教程集 > 脚本编程 > javascript > 正文纯css div经典导航菜单代码

纯css div经典导航菜单代码

发布时间：2016-10-23 编辑：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:80px;} #menu {padding:0 0 0 50px; margin:0; list-style:none; width:650px; float:right; border-top:5px solid #844; margin-top:-40px;} #menu li {float:left; margin-right:15px;} #menu li a {display:block; width:0; height:0; border-left:35px solid #fff; border-right:35px solid #fff; border-bottom:35px dashed transparent; position:relative; font-family:arial, sans-serif; font-size:11px; color:#000; text-decoration:none; top:48px;} #menu li b {position:absolute; left:-35px; top:-50px; height:50px; width:70px; line-height:50px; text-align:center; cursor:pointer; background:#fff;} .home #menu li#home a {color:#fff; border-left:35px solid red; border-right:35px solid red;} .home #menu li#home b {background:red;} .single #menu li#single a {color:#fff; border-left:35px solid orange; border-right:35px solid orange;} .single #menu li#single b {background:orange;} .dropdown #menu li#dropdown a {color:#fff; border-left:35px solid #cc0; border-right:35px solid #cc0;} .dropdown #menu li#dropdown b {background:#cc0;} .dropline #menu li#dropline a {color:#fff; border-left:35px solid green; border-right:35px solid green;} .dropline #menu li#dropline b {background:green;} .flyout #menu li#flyout a {color:#fff; border-left:35px solid blue; border-right:35px solid blue;} .flyout #menu li#flyout b {background:blue;} .support #menu li#support a {color:#fff; border-left:35px solid indigo; border-right:35px solid indigo;} .support #menu li#support b {background:indigo;} .contact #menu li#contact a {color:#fff; border-left:35px solid violet; border-right:35px solid violet;} .contact #menu li#contact b {background:violet;} #menu li#home a:hover, #menu li#home a:active, #menu li#home a:focus {color:#fff; border-left:35px solid red; border-right:35px solid red;} #menu li#home a:hover b, #menu li#home a:active b, #menu li#home a:focus b {background:red;} #menu li#single a:hover, #menu li#single a:active, #menu li#single a:focus {color:#fff; border-left:35px solid orange; border-right:35px solid orange;} #menu li#single a:hover b, #menu li#single a:active b, #menu li#single a:focus b {background:orange;} #menu li#dropdown a:hover, #menu li#dropdown a:active, #menu li#dropdown a:focus {color:#fff; border-left:35px solid #cc0; border-right:35px solid #cc0;} #menu li#dropdown a:hover b, #menu li#dropdown a:active b, #menu li#dropdown a:focus b {background:#cc0;} #menu li#dropline a:hover, #menu li#dropline a:active, #menu li#dropline a:focus {color:#fff; border-left:35px solid green; border-right:35px solid green;} #menu li#dropline a:hover b, #menu li#dropline a:active b, #menu li#dropline a:focus b {background:green;} #menu li#flyout a:hover, #menu li#flyout a:active, #menu li#flyout a:focus {color:#fff; border-left:35px solid blue; border-right:35px solid blue;} #menu li#flyout a:hover b, #menu li#flyout a:active b, #menu li#flyout a:focus b {background:blue;} #menu li#support a:hover, #menu li#support a:active, #menu li#support a:focus {color:#fff; border-left:35px solid indigo; border-right:35px solid indigo;} #menu li#support a:hover b, #menu li#support a:active b, #menu li#support a:focus b {background:indigo;} #menu li#contact a:hover, #menu li#contact a:active, #menu li#contact a:focus {color:#fff; border-left:35px solid violet; border-right:35px solid violet;} #menu li#contact a:hover b, #menu li#contact a:active b, #menu li#contact a:focus b {background:violet;} </style></textarea>

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

您可能感兴趣的文章：
div css 二级下拉菜单导航代码
 css div布局的好处与优势是什么？
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
 导航菜单-左则多层树形下拉菜单
 纯CSS制作的竖向导航菜单
 css 水平横向导航菜单效果
 css ul li实现纵向导航菜单效果
 jquery导航固定效果实例
 经典css 导航菜单代码
 jquery遮罩层效果实现导航菜单代码

上一篇：经典tab选项卡导航菜单下一篇：css div 导航菜单代码

[关闭]

纯css div经典导航菜单代码

最近更新

浏览排行