教程集 > 脚本编程 > javascript > 正文韩国风格css横向导航菜单代码

韩国风格css横向导航菜单代码

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

教程集为您提供韩国风格css横向导航菜单代码等资源，欢迎您收藏本站，我们将为您提供最新的韩国风格css横向导航菜单代码资源

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

<textarea name="runcool" rows="28" cols="75" >韩国风格css横向导航菜单代码 <style> #menu {padding:0; margin:0; list-style:none; width:546px; height:180px; background:url(http://www.jiaochengji.com/demo/pic/bw.jpg); position:relative; float:right;} #menu li {float:left;} #menu li a {display:block; width:78px; height:100px; background:transparent;} #menu li a b {position:absolute; left:-9999px;} #menu li#home, #menu li#dropdown, #menu li#flyout, #menu li#contact {margin-top:23px;} #menu li#single, #menu li#dropline, #menu li#support {margin-top:3px;} #menu li#home a:hover {background:url(http://www.jiaochengji.com/demo/pic/color.jpg) 0 -23px;} #menu li#single a:hover {background:url(http://www.jiaochengji.com/demo/pic/color.jpg) -78px -3px;} #menu li#dropdown a:hover {background:url(http://www.jiaochengji.com/demo/pic/color.jpg) -156px -23px;} #menu li#dropline a:hover {background:url(http://www.jiaochengji.com/demo/pic/color.jpg) -234px -3px;} #menu li#flyout a:hover {background:url(http://www.jiaochengji.com/demo/pic/color.jpg) -312px -23px;} #menu li#support a:hover {background:url(http://www.jiaochengji.com/demo/pic/color.jpg) -390px -3px;} #menu li#contact a:hover {background:url(http://www.jiaochengji.com/demo/pic/color.jpg) -468px -23px;} .home #menu li#home a, .home #menu li#home a:hover, #menu li#home a:active, #menu li#home a:focus {background:url(http://www.jiaochengji.com/demo/pic/white.jpg) 0 -23px;} .single #menu li#single a, .single #menu li#single a:hover, #menu li#single a:active, #menu li#single a:focus {background:url(http://www.jiaochengji.com/demo/pic/white.jpg) -78px -3px;} .dropdown #menu li#dropdown a, .dropdown #menu li#dropdown a:hover, #menu li#dropdown a:active, #menu li#dropdown a:focus {background:url(http://www.jiaochengji.com/demo/pic/white.jpg) -156px -23px;} .dropline #menu li#dropline a, .dropline #menu li#dropline a:hover, #menu li#dropline a:active, #menu li#dropline a:focus {background:url(http://www.jiaochengji.com/demo/pic/white.jpg) -234px -3px;} .flyout #menu li#flyout a, .flyout #menu li#flyout a:hover, #menu li#flyout a:active, #menu li#flyout a:focus {background:url(http://www.jiaochengji.com/demo/pic/white.jpg) -312px -23px;} .support #menu li#support a, .support #menu li#support a:hover, #menu li#support a:active, #menu li#support a:focus {background:url(http://www.jiaochengji.com/demo/pic/white.jpg) -390px -3px;} .contact #menu li#contact a, .contact #menu li#contact a:hover, #menu li#contact a:active, #menu li#contact a:focus {background:url(http://www.jiaochengji.com/demo/pic/white.jpg) -468px -23px;} </style>

<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>

</textarea>

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

您可能感兴趣的文章：
韩国风格css横向导航菜单代码
 如何用CSS制作纵向导航菜单？
css 水平横向导航菜单效果
 css div布局的好处与优势是什么？
7款风格新颖的jQuery/CSS3菜单导航分享
 javascript 无限级横向下拉导航菜单效果
 导航菜单-横竖结合的折叠下拉导航菜单效果
 jquery弹性滑动导航菜单
 jquery导航固定效果实例
 学习从实践开始之jQuery插件开发菜单插件开发

上一篇：css导航菜单下一篇：绝对彰显前端攻城师逼格的Javascript“整型数据趋向”操作符

[关闭]

韩国风格css横向导航菜单代码

最近更新

浏览排行