下拉菜单案例

<!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. firewall-cmd命令

    firewalld 基本操作 安装firewalld # yum install firewalld firewall-config firewalld启动,停止,开机启动与否,查看状态 # syst ...

  2. [Redis-CentOS7]Redis列表操作(三)

    LPUSH添加列表 127.0.0.1:6379> LPUSH websites www.baidu.com (integer) 1 LRANGE 获取全部值 127.0.0.1:6379> ...

  3. Java自学-多线程 同步synchronized

    Java 多线程同步 synchronized 多线程的同步问题指的是多个线程同时修改一个数据的时候,可能导致的问题 多线程的问题,又叫Concurrency 问题 步骤 1 : 演示同步问题 假设盖 ...

  4. Android Binder实现浅析-Binder驱动

    简介 Android是如何实现跨进程通信的,大家熟悉的Binder是什么,怎么设计的,进程间的数据如何发送接收的.本文将以及解析,并对Binder驱动实现.Native层实现.Java层实现三块做一个 ...

  5. Android中通过数组资源文件xml与适配器两种方式给ListView列表视图设置数据源

    场景 实现效果如下 注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书.教程推送与免费下载. 实现 将布局改 ...

  6. Maven 多模块开发

    多模块开发在大项目中用得比较多,把一个项目拆分为多个模块,一个小组开发一个模块. 比如微服务,一个服务一个模块:比如ssm,持久层(dao)一个模块,业务层一个模块(service).视图层(mvc. ...

  7. 痞子衡嵌入式：ARM Cortex-M内核那些事（6）- 系统堆栈机制

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是ARM Cortex-M堆栈机制. 今天给大家分享的这篇依旧是2016年之前痞子衡写的技术文档,花了点时间重新编排了一下格式.前面痞子衡 ...

  8. PERC H310 配置详细步骤【阵列RAID创建】【阵列恢复】【阵列池创建】

    机器配置: HP PRO6300 二手淘的201912,HP的主板芯片Intel Q75芯片组,集成显卡(集成显卡与H310阵列卡冲突),CPU Intel I5 3450 [raid5阵列创建] 1 ...

  9. 简述react、redux、react-redux、redux-saga、dva之间的关系

    [react] 定位:React 是一个用于构建用户界面的JavaScript库. 特点:它采用声明范式来描述应用,建立虚拟dom,支持JSX语法,通过react构建组件,能够很好的去复用代码: 缺点 ...

  10. Unbuntu--安装VMware Tools

    实现虚拟机Ubuntu窗口自适应,以及与本地主机粘贴复制 一.安装VMware Tools 1.首先在虚拟机点击安装VMware tools,会在个人home目录下生成VMwareTools-10.3 ...