下拉菜单案例

<!DOCTYPE html>

<html>

<head lang="en">

  <meta charset="UTF-8">

  <title></title>

  <style type="text/css">

    * {

      margin: 0;

      padding: 0;

    }

    ul {

      list-style: none;

    }

    .wrap {

      width: 330px;

      height: 30px;

      margin: 100px auto 0;

      padding-left: 10px;

      background-image: url(imgs/bg.jpg);

    }

    .wrap li {

      background-image: url(imgs/libg.jpg);

    }

    .wrap>ul>li {

      float: left;

      margin-right: 10px;

      position: relative;

    }

    .wrap a {

      display: block;

      height: 30px;

      width: 100px;

      text-decoration: none;

      color: #000;

      line-height: 30px;

      text-align: center;

    }

    .wrap li ul {

      position: absolute;

      top: 30px;

      display: none;

    }

  </style>

  <script src="../jquery-1.12.4.js"></script>

  <script>

    $(function () {

      var $li = $(".wrap>ul>li")

      //给li注册鼠标经过事件，让自己的ul显示出来

      $li.mouseenter(function () {

        //找到所有的儿子，并且还得是ul

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

      })

      $li.mouseleave(function () {

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

      })

    });

  </script>

</head>

<body>

  <div class="wrap">

    <ul>

      <li>

        <a href="javascript:void(0);">一级菜单1</a>

        <ul class="ul">

          <li><a href="javascript:void(0);">二级菜单11</a></li>

          <li><a href="javascript:void(0);">二级菜单12</a></li>

          <li><a href="javascript:void(0);">二级菜单13</a></li>

        </ul>

      </li>

      <li>

        <a href="javascript:void(0);">一级菜单2</a>

        <ul>

          <li><a href="javascript:void(0);">二级菜单21</a></li>

          <li><a href="javascript:void(0);">二级菜单22</a></li>

          <li><a href="javascript:void(0);">二级菜单23</a></li>

        </ul>

      </li>

      <li>

        <a href="javascript:void(0);">一级菜单3</a>

        <ul>

          <li><a href="javascript:void(0);">二级菜单31</a></li>

          <li><a href="javascript:void(0);">二级菜单32</a></li>

          <li><a href="javascript:void(0);">二级菜单33</a></li>

        </ul>

      </li>

    </ul>

  </div>

</body>

</html>

jQuery---下拉菜单案例的更多相关文章

  1. z-tree官方提供的下拉菜单案例

    1.z-tree官方提供的下拉菜单案例 <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - selec ...

  2. 可控制导航下拉方向的jQuery下拉菜单代码

    效果:http://hovertree.com/texiao/nav/1/ 代码如下: <!DOCTYPE html> <html> <head> <meta ...

  3. jquery 下拉菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. jquery下拉菜单

    下拉菜单或者导航是我们在网站开发中不可或缺的网站元素之一,使用jQuery可以制作出简洁易用.美观大方的下拉菜单或者导航效果. 下面展示的12款利用jQuery实现的下拉菜单即导航效果整理自前端大牛爱 ...

  5. jquery下拉菜单打开的同时,同行右边的图标变化

    1.用bootstrap的折叠面板时,右侧的三角图标随菜单下拉而旋转90°: html代码 <a class="advanced-option" data-toggle=&q ...

  6. jQuery下拉菜单插件Tendina.

    插件效果: 下载地址和文档: https://github.com/iprignano/tendina

  7. JS 下拉菜单案例

    css代码 .nav { width: 300px; height: 400px; list-style: none; padding:; margin: 0 auto; } .nav>li { ...

  8. jquery带下拉菜单和焦点图

    jQuery,下拉菜单,二级菜单,索引按钮,焦点图代码,jquery带下拉菜单和焦点图是一款顶部通栏带二级下拉菜单和banner导航菜单代码. JQuery特效代码来源:http://www.huiy ...

  9. 兼容ie7的导航下拉菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. css-下拉菜单案例

    <!DOCTYPE html>CSS4-布局2-display下拉菜单案例 <style>.xiala{width:200px;background:#ddd;}.xiala ...

随机推荐

  1. 算法将一个对象中的某一个key值变为true,其他值都为false

    主要运用在,v-if v-show切换不同内容时,非常快的打开某一个区域,关闭其他的区域哈. 这样就不需要每一个设置false,打开区域设置为true. 可以优化代码哈 for in 主要循环对象(空 ...

  2. 优雅的C#

    @符号:字符串中的转义符不转义,可支持字符串换行,例如:string test = "hello\\",正常输出hello\,改成string test = @"hell ...

  3. thinkPHP中Model的字段映射问题

    在model定义中不要自己定义相应的字段变量,因为一旦定义,之后的赋值会直接赋给自己定义的属性,但实际上model抽象类重写了__set()方法,将未定义的属性存入了$data里面,写入数据库是也会从 ...

  4. 二次开发的Selenium Demo版本

    文件名你们自己命名就好,至于为什么要重写强制位移的函数呢,是因为Mac上Selenium不支持拖拽,只能这样做了,4个文件--------------------------------------- ...

  5. absoulue与relative配合定位盒子居中问题

    如何通过absoulue与relative配合把一个盒子或者是把2个div块同时放到页面中央部分?定位完成后为什么又需要margin-left与margin-top各往回走50%的长度,别忘记用z-i ...

  6. Centos7.6 Mysql数据库自动备份配置

    1.查看磁盘空间情况 执行 df -h 选择剩余空间最大的目录 (以/目录为例) 2.创建备份目录: cd / mkdir backup cd backup 3.创建备份Shell脚本: vim mo ...

  7. IDEA创建mybatisDemo，并实现简单的CRUD

    Mybatis 是支持普通SQL查询,存储过程和高级映射的优秀持久层框架.在Java或者Java Web项目中,添加Mybatis必须的核心包,就能对数据表进行增删改查操作了.下面以MySQL数据库o ...

  8. LeetCode刷题专题

    1. https://leetcode-cn.com/problems/container-with-most-water/ 思想:左右边界  i,j   向中间收敛 ,左右夹逼 方法一: 一维数组的 ...

  9. Mysql连接字符，字段函数concat()

    Mysql连接字符,字段函数concat() 可将多个字符串或字段连接,多个参数以逗号隔开 select concat('现在是:',new_date) from work

  10. Mysql-分库分区分表

    大数据-分表分区分库问题集:1.分表时两张表的数据都一样么?如果一样,只是降低了表的访问量,但是如果数据多了还是没有提高查询的效率答:分表是对一张表中的数据按照某种规则进行拆分到三张表中,三张表的所有 ...