下拉菜单案例

<!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. [Linux-CentOS7]yum清华源CentOS7

    shell直接运行 cat > 01.yumrepo.sh << 'EOF' # 创建备份路径 mkdir -p /etc/yum.repos.d/repo.bak/ # 备份源 m ...

  2. 11种常用css样式之开篇文本字体学习

    常见css样式:1.字体与颜色2.背景属性3.文本属性4.边框属性5.鼠标光标属性6.列表样式7.定位属性8.内外边距9.浮动和清除浮动10.滚动条11.显示和隐藏 文本:1.letter-spaci ...

  3. [20200223]关于latch and mutext的优化.txt

    [20200223]关于latch and mutext的优化.txt --//前一段时间一直在测试使用DBMS_SHARED_POOL.MARKHOT标识热对象以及sql语句的优化.--//有别人问 ...

  4. mysql必知必会--使用数据处理函数

    函数 与其他大多数计算机语言一样,SQL支持利用函数来处理数据.函数 一般是在数据上执行的,它给数据的转换和处理提供了方便. 在前一章中用来去掉串尾空格的 RTrim() 就是一个函数的例子 函数没有 ...

  5. Java BigDecimal toString() 的转换和输出

    BigDecimal 的 toString() 方法将会把 BigDecimal 通过字符串的方式输出.这个方法将会在必要的时候使用指数进行输出. 具体的转换步骤是按照下面的步骤进行转换的: BigD ...

  6. 这个 Python 代码自动补全神器搞得我卧槽卧槽的

    是时候跟你说说这个能让你撸代码撸得舒服得不要不要的神器了——kite. ​!   ​ 简单来说,它是一款 IDE 的插件,能做到代码自动补全,可能你会说了,这有什么牛逼的?一般的编辑器不都有这个功能么 ...

  7. Go Web爬虫并发实现

    题目:Exercise: Web Crawler 直接参考了 https://github.com/golang/tour/blob/master/solutions/webcrawler.go 的实 ...

  8. VBA-UTF-8文件的操作

    1.读入UTF-8文件    Dim value As String   Dim vLines As Variant Call ReadCsvUTF_8(vFile.Path, value) vLin ...

  9. redis主从同步，总是显示master_link_status:down的解决方法

    小编使用的redis的版本号是5.0.5,可能会略有不同,例如redis.conf配置文件中,没有slaveof这一项配置 使用命令配置主从复制 今天在使用命令slaveof或者是replicaof命 ...

  10. Docker 网络原理

    引言 学习docker网络,可以带着下面两个问题来探讨 容器之间可以相互访问的原理 容器暴露端口后,通过宿主机访问到容器内应用,并且对于访问端而言不用感知容器存在的原理 Docker 本身的技术依赖L ...