教程集 > 脚本编程 > javascript > 正文 js下拉菜单样式代码

js下拉菜单样式代码

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

教程集为您提供js下拉菜单样式代码等资源，欢迎您收藏本站，我们将为您提供最新的js下拉菜单样式代码资源

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

<textarea name="runcool" rows="28" cols="75" >js下拉菜单样式代码 <style> #pad {height:100px;} #menuPositioner {width:100%; position:relative; float:left; top:-40px; margin-bottom:-40px; } #menuHolder {position:relative; float:left; left:50%;} #menu, #menu ul {padding:0; margin:0; list-style:none; font: 12px arial, verdana, sans-serif; background:url(http://www.jiaochengji.com/demo/pic/trans.gif); position:relative; z-index:100;} #menu {height:40px; float:left; padding:0; background:#4b4d3f; position:relative; right:50%;} #menu ul {position:absolute; left:-9999px; top:-9999px;} #menu table {border-collapse:collapse; margin:-1px; padding:0; width:0; height:0;} #menu li {float:left;} #menu li a {display:block; float:left; color:#fff; height:40px; padding:0 20px 0 0; line-height:38px; text-decoration:none; background:url(http://www.jiaochengji.com/demo/pic/http://www.jiaochengji.com/demo/pic/button1.gifa.gif) no-repeat right top;} #menu li a.sub {background:url(http://www.jiaochengji.com/demo/pic/button3a.gif) no-repeat right top;} #menu li a b {display:block; float:left; height:40px; background:url(http://www.jiaochengji.com/demo/pic/button1.gif.gif) left top; padding:0 0 0 20px; cursor:pointer;} #menu li:hover {position:relative; z-index:100;} #menu a:hover {position:relative; z-index:100; color:#fc0;} #menu a.sub:hover {background:url(http://www.jiaochengji.com/demo/pic/button3.gif) no-repeat right top;} #menu li:hover > a {color:#fc0;} #menu li:hover > a.sub {background:url(http://www.jiaochengji.com/demo/pic/button3.gif) no-repeat right top;} #menu :hover ul {left:0; top:40px; z-index:300; width:130px; padding-top:4px; background:url(http://www.jiaochengji.com/demo/pic/trans.gif);} #menu :hover ul li a {height:25px; width:120px; padding:0 0 0 10px; line-height:25px; background:#546775; color:#fff; border-bottom:1px solid #a3b6c4; font-size:11px;} #menu :hover ul li a.fly {background:#546775 url(http://www.jiaochengji.com/demo/pic/fly.gif) no-repeat right center;} #menu :hover ul li a:hover {color:#fc0;} #menu :hover ul li a:hover.fly {background:#546775 url(http://www.jiaochengji.com/demo/pic/fly-over.gif) no-repeat right center;} #menu :hover ul li:hover > a {color:#fc0;} #menu :hover ul li:hover > a.fly {background:#546775 url(http://www.jiaochengji.com/demo/pic/fly-over.gif) no-repeat right center;} #menu :hover ul ul {position:absolute; left:-9999px; top:-9999px;} #menu :hover ul :hover ul {left:117px; top:0; padding:0;} #menu :hover ul :hover ul li a {background:#a3b6c4; color:#000; border-bottom:1px solid #546775; font-size:11px;} #menu :hover ul :hover ul li a:hover {color:#fff;} </style>

<ul id="menu"> <li>Home</li> <li>Single Level</li> <li class="current">Dropdown <ul class="sub1"> <li>Dropdown one <ul class="fly1"> <li>Dropdown 1.1</li> <li>Dropdown 1.2</li> <li>Dropdown 1.3</li> <li>Dropdown 1.4</li> <li>Dropdown 1.5</li> <li>Dropdown 1.6</li> </ul> </li> <li class="currentsub">Dropdown two <ul class="fly2"> <li>Dropdown 2.1</li> <li>Dropdown 2.2</li> <li class="currentfly">Dropdown 2.3</li> <li>Dropdown 2.4</li> <li>Dropdown 2.5</li> </ul> </li> <li>Dropdown three</li> <li>Dropdown four</li> <li>Dropdown five <ul class="fly3"> <li>Dropdown 5.1</li> <li>Dropdown 2.2</li> <li>Dropdown 3.3</li> </ul> </li> </ul> </li> <li>Dropline <ul class="sub2"> <li>Dropline one</li> <li>Dropline two</li> <li>Dropline three</li> <li>Dropline four</li> <li>Dropline five</li> <li>Dropline six</li> </ul> </li> <li>Flyout <ul class="sub3"> <li>Flyout one</li> <li>Flyout two</li> <li>Flyout three</li> <li>Flyout four</li> </ul> </li> <li id="support">Support</li> <li id="contact">Contact</li> </ul>

</textarea>

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

您可能感兴趣的文章：
Jquery带搜索框的下拉菜单
 jQuery菜单插件 Smooth Navigational Menu
js下拉菜单代码
 js点击下拉菜单
 Jquery下拉菜单(jquery 下拉菜单插件Sexy Drop Down Menu)
js 控制页面跳转的五种方法
 导航菜单-左则多层树形下拉菜单
 jQuery ul标签下拉菜单演示代码
 JS清空table所有行背景色与文本框内容的代码
 JQuery实现绚丽的横向下拉菜单

上一篇：js 下拉菜单下一篇：javascript css tab 切换菜单效果

[关闭]

js下拉菜单样式代码

最近更新

浏览排行