教程集 > 脚本编程 > javascript > 正文漂亮CSS DIV导航菜单代码

漂亮CSS DIV导航菜单代码

发布时间：2016-10-22 编辑：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> #menu {padding:0; margin:0; list-style:none; width:700px; height:45px; position:absolute; top:150px; left:300px;} #menu li {position:relative; float:left;} #menu li a {display:block; height:45px; width:100px; padding:0; float:left; color:#fff; text-decoration:none; font-family:"trebuchet MS", sans-serif; font-size:14px; text-align:center; cursor:pointer; background: url(/blog/upload/image/20091219073159.png);} #menu li a b {position:relative; top:12px; font-weight:normal;} * html #menu li a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/blog/upload/image/20091219073159.png', sizingMethod='scale');} #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: url(/blog/upload/image/20091219073249.png) no-repeat right top; cursor:pointer; color:#fff;} * html #menu li a:hover, * html #menu li a:active, * html #menu li a:focus, * html .home #menu li#home a, * html .single #menu li#single a, * html .dropdown #menu li#dropdown a, * html .dropline #menu li#dropline a, * html .flyout #menu li#flyout a, * html .support #menu li#support a, * html .contact #menu li#contact a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/blog/upload/image/20091219073249.png', sizingMethod='scale');} #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 {cursor:pointer; top:8px; padding-right:3px;} </style></textarea>

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

您可能感兴趣的文章：
javascript css导航菜单
 javasctipt 漂亮的感应鼠标导航菜单
 jquery遮罩层效果实现导航菜单代码
 jquery 遮罩层效果实现的导航菜单
 仿猪八戒网首页导航菜单
 对css滑动门技术的一些总结和归纳
 制作jquery遮罩层效果导航菜单代码分享
 漂亮CSS DIV导航菜单代码
 漂亮的css导航菜单
 纯CSS3水平动态导航菜单例子

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

[关闭]

漂亮CSS DIV导航菜单代码

最近更新

浏览排行