放第一级显示第二级
2016-04-05 10:38
281 查看
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery-1.8.2.min.js"></script> <script type="text/javascript" src="iCheck/icheck.min.js"></script> <script type="text/javascript" src="11.js"></script> <script type="text/javascript" src="artTemplate.js"></script> <link rel="stylesheet" type="text/css" href="iCheck/all.css"> <style> *{ margin: 0; padding: 0; } .f1 ul li{ line-height: 70px; background-color: #aaa; width: 100px; position: relative; list-style: none } .f2 ul li{ line-height: 70px; background-color: #aaa; width: 100px; position: relative; list-style: none; } .f4 ul li{ line-height: 70px; background-color: #aaa; width: 100px; position: relative; list-style: none; } .box{ width: 100%; height: 100%; } .f2{ position: absolute; left: 100px; top: 0; display: none; } .f4{ position: absolute; left: 100px; top: 0; display: none; } </style> </head> <body id="b"> <div class="box"> <div class="f1" style="float: left;"> <ul> <li id="i1" style="background: red;">22222 <div class="f2"> <ul> <li style="background: yellow;">3333</li> <li id="i2" style="background: red">333333 <div class="f4"> <ul> <li style="background: green;">4444</li> <li style="background: yellow;">444444</li> <li>4444444</li> </ul> </div> </li> <li style="background: #eee">33333</li> </ul> </div> </li> <li style="background: green;">22222</li> <li>22222</li> </ul> </div> </div> </body> <script type="text/javascript"> $(document).ready(function(){ $('#i1').mouseover(function(){ $('.f2').stop().fadeIn(); }); $('#i1').mouseout(function(){ $('.f2').stop().fadeOut(); }); $('#i2').mouseover(function(){ $('.f4').stop().fadeIn(); }); $('#i2').mouseout(function(){ $('.f4').stop().fadeOut(); }); }); </script> </html>
相关文章推荐
- windows安装完nodejs,cmd输入npm没反应,npm install 没反应
- 关于主题theme
- Oracle to_char格式化函数
- linux 混杂设备驱动之adc驱动
- Android: 如何利用Handler处理和发送消息来实现页面刷新的功能
- 3月国内浏览器市场份额:搜狗高速回归第三名
- UnityVS(Visual Studio Tools For Unity)的下载、安装与使用
- 简单的视频采集demo
- GC垃圾回收
- mongoDB 入门指南、示例
- senseTime,FaceU人脸识别技术
- Kafka管理工具介绍
- 数据库中主键与外间的区别
- 数据库中主键与外间的区别
- 数据库中主键与外间的区别
- 数据库中主键与外间的区别
- 数据库中主键与外间的区别
- 数据库中主键与外间的区别
- 数据库中主键与外间的区别
- 数据库中主键与外间的区别