本文实例讲述了js实现横向伸展开的二级导航菜单代码。分享给大家供大家参考。具体如下：
这是一款js实现的横向伸展开二级导航菜单，鼠标放在一级菜单的第四个菜单项上，就能展开二级的菜单，菜单没有过多美化，只是一般的修饰，使用的朋友可根据您自己的网站风格重新美化菜单风格。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-r-show-menu-style-codes/
具体代码如下：
横向伸展开来的二级导航菜单 .suckerdiv { } .suckerdiv ul { width: 120px; position: relative; } .suckerdiv ul li ul { left: 120px; position: absolute; width: 140px; top: 0; display: none; } .suckerdiv ul li ul li ul { left: 159px; } .suckerdiv ul li a { display: block; color: #353302; text-decoration: none; font:12px 宋体; background: #eee; line-height:24px; padding: 0px 10px; border: 1px solid #fff; border-bottom: 0; } .suckerdiv ul li a:visited { color: black; } .suckerdiv ul li a:hover{ color: white; background-color: #97c839; } .suckerdiv .subfolderstyle { } .suckerdiv a.subfolderstyle:hover { background: #97c839 url() no-repeat center right; }
- 腾讯新闻
- 腾讯汽车
- 腾讯科技
- 腾讯手机
- HTC
- 联想
- 华为
- 中兴
希望本文所述对大家的javascript程序设计有所帮助。
