下拉菜单案例

<!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. ts的特殊数据类型

    四. Ts数据类型 tuple(元组类型):可以给数组指定位置存指定类型数据 例:let arr:[number, string] = [123, ‘123’]; enum(枚举):将数字转化为标识符 ...

  2. Android Studio 3.6 正式版终于发布了

    Google 下载地址 百度云 下载地址 密码:epl9 如题,Android Studio 3.6 正式版终于发布了,值得兴奋呀,毕竟 3.5 大版本更新也已经差不多半年了,撒花撒花!这次更新又更新 ...

  3. vue h5移动端禁止缩放

    在index.html里面写 <meta name="viewport" content="width=device-width, initial-scale=1. ...

  4. 基于HttpURLConnection的接口调用，支持GET&POST

    单位要做一个多级部署平台,大概意思就是一级系统可以监控下属地域的数据也可管理本地的数据.之前做短信猫用过httpClient请求,与此大同小异.封装了一个两种请求方式的工具类. package com ...

  5. mysql必知必会--联 结 表

    联结 SQL最强大的功能之一就是能在数据检索查询的执行中联结(join) 表.联结是利用SQL的 SELECT 能执行的最重要的操作,很好地理解联结 及其语法是学习SQL的一个极为重要的组成部分 外键 ...

  6. Android进程调度之adj算法

    copy from : http://gityuan.com/2016/08/07/android-adj/ 一.概述 提到进程调度,可能大家首先想到的是Linux cpu调度算法,进程优先级之类概念 ...

  7. OpenCASCADE(一) VS2017+OpenCASCADE+MFC 下载配置安装运行单文档程序画个基本图形

    原文作者:aircraft 原文链接:https://www.cnblogs.com/DOMLX/p/12368154.html 一.下载OpenCASCADE 官网下载是: http://www.o ...

  8. Oracle命令行导入dmp文件

    一.导入准备 使用impdp命令,需要在oracle数据库服务器操作: 使用sqlplus或者Oracle客户端(PL/SQL) 链接到相应的Oracle数据库实例,进行如下操作 1. 创建逻辑目录, ...

  9. 信号处理之DFT、IDFT

    一.DFT之前言部分 由于matlab已提供了内部函数来计算DFT.IDFT,我们只需要会调用fft.ifft函数就行: 二.函数说明: fft(x):计算N点的DFT.N是序列x的长度,即N=len ...

  10. 如何将文本放置在div的底部显示呢？

    转自:将文本定位于div的底部的方法  摘要: 下文讲述将文本放于div的底部的两种方法,如下所示: 实现思路: 思路1:采用绝对定位的方式,将其放置于div的底部 思路2:使用Line-height ...