下拉菜单案例

<!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. Error serializing object：序列化对象时出错

    序列化对象时出错 :Error serializing object. Error serializing object. Cause: java.io.NotSerializableExceptio ...

  2. 查询MS SQL的版本号

    可以使用全局变量@@VERSION或者是使用SERVERPROPERTY()函数: 参考: SELECT @@VERSION SELECT SERVERPROPERTY('Edition') Sour ...

  3. warning Unexpected use of undefined no-undefined

    报错翻译:警告意外使用未定义的no-undefined(谷歌这次翻译的不行) 报错原因undefined直接使用了,如下↓ 其实报错的意思就是这样不安全,看下面一个例子 var foo = undef ...

  4. python基础练习，循环、列表、字典、数组

    # encoding: utf-8 ''' @author: mark @file: 20200214.py @time: 2020/2/14 14:21 @software: PyCharm ''' ...

  5. layui导出表格设置常用函数

    1.设置导出单元格为数字格式 字段名: function (value, line, data) { return { v: value, t: 'n' } }

  6. Java-利用位数猜年龄

    题目: 美国数学家维纳(N.Wiener)智力早熟,11岁就上了大学.他曾在1935~1936年应邀来中国清华大学讲学.一次,他参加某个重要会议,年轻的脸孔引人注目.于是有人询问他的年龄,他回答说:“ ...

  7. 等差数列，for循环，递归和尾递归的对比

    生活中,如果1+2+3+4.....+100,大家基本上都会用等差数列计算,如果有人从1开始加,不是傻就是白X,那么程序中呢,是不是也是这样.今天无意中看到了尾递归,以前也写过,但是不知道这个专业名词 ...

  8. Linux学习记录(二)：常用工具

    博主使用的操作系统为Ubuntu tmux 终端分屏 安装 Ubuntu使用apt-get安装 sudo apt-get install tmux 使用 默认命令键:Ctrl + B %(百分号) 左 ...

  9. B. Modulo Equality

    当时想到的第一个想法是用拓展欧几里得解方程,求x的最小正解.一发交了之后发现爆long long,因为m是1e9. 因此本题的正解是暴力,保证有解的情况下,那么a数组中的一个数必然对应着b数组中的一个 ...

  10. KMP刷题记录

    [BZOJ4698][SDOI2008]Sandy的卡片 差分一下然后选一个串,用这个串的所有前缀和其他串kmp,求出最长的公共部分即可 代码: #include <bits/stdc++.h& ...