php无限极下拉框,JavaScript_jquery 无限极下拉菜单的简单实例(精简浓缩版)，jquery 无限极下拉菜单的简单实 - phpStudy...

jquery 无限极下拉菜单的简单实例(精简浓缩版)

jquery 无限极下拉菜单的简单实例(精简浓缩版)

phpstudy www.phpstudy.net

$(document).ready(function(){

$(".menu li").hover(function(){

$(this).children("ul").show(); //mouseover

},function(){

$(this).children("ul").hide(); //mouseout

});

});

ul{ list-style:none; margin:0; padding:0;}

.menu { height:30px; line-height:30px; }

.menu li { float:left; position:relative;} /*这一级是导航*/

.menu li a { display:block; height:30px; line-height:30px; padding:0 20px; }

.menu li a:hover { color:#000; background:#EFEFEF; }

.menu li a.more { color:red; }

.menu li ul { position:absolute; float:left; width:150px; border:1px solid #000; display:none;} /*这是第二级菜单*/

.menu li ul a { width:110px; }

.menu li ul a:hover { background:gray;}

.menu li ul ul{ top:0;left:150px;} /*从第三级菜单开始,所有的子级菜单都相对偏移*/

• 菜单一
  • 菜单一
  • 菜单二
  • 菜单三
  • 菜单四
  • 菜单五
    • 菜单一
    • 菜单二
    • 菜单三
    • 菜单四
    • 菜单五
      • 菜单一
      • 菜单二
      • 菜单三
      • 菜单四
      • 菜单五
        • 菜单一
        • 菜单二
        • 菜单三
        • 菜单四
        • 菜单五
          • 菜单一
          • 菜单二
          • 菜单三
          • 菜单四
          • 菜单五
• 菜单二
  • 菜单一
  • 菜单二
  • 菜单三
    • 菜单一
    • 菜单二
    • 菜单三
      • 菜单一
      • 菜单二
      • 菜单三
      • 菜单四
      • 菜单五
    • 菜单四
• 菜单三
• 菜单四
• 菜单五
  • 菜单一
  • 菜单二
  • 菜单三

以上这篇jquery 无限极下拉菜单的简单实例(精简浓缩版)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持phpstudy。相关阅读:

js构造函数、索引数组和属性的实现方式和使用

C#实现的SN快速输入工具实例

用VC++6.0的控制台实现2048小游戏的程序

html中设置锚点定位的几种常见方法

mysql获取group by总记录行数的方法

MAC通过命令行调用ntpdate校对系统时间

JS根据变量保存方法名并执行方法示例

jquery实现仿新浪微博评论滚动效果

Iframe实现跨浏览器自适应高度解决方法

升级Win10一周年更新预览版14342后蓝屏怎么办？

php在数据库抽象层简单使用PDO的方法

HTML中iFrame标签的两个用法介绍

PHP中通过trigger_error触发PHP错误示例

一个ASP.NET的MYSQL的数据库操作类自己封装的