1使用$(function(){...})获取到想要作用的HTML元素。

2通过使用children()方法寻找子元素。
       3通过使用show()方法来显示HTML元素。
       4通过使用hide()方法来隐藏HTML元素。
       5jQuery库引用方法:将jQuery库下载到电脑上,然后引用。

 <script type="text/javascript" src="jquery/jquery-3.3.1.min.js"></script>

body部分

<div id="nav" class="nav">
  <ul>
    <li><a href="#">一级导航</a></li>
   <li class="navmenu"><a href="#">一级导航</a>
    <ul>
     <li><a href="#">二级导航</a></li>
     <li><a href="#">二级导航</a></li>
     <li><a href="#">二级导航</a></li>
    </ul>
   </li>
   <li class="navmenu"><a href="#">一级导航</a>
    <ul>
     <li><a href="#">二级导航</a></li>
     <li><a href="#">二级导航</a></li>
     <li><a href="#">二级导航</a></li>
    </ul>
   </li>
   <li><a href="#">一级导航</a></li>
   <li><a href="#">一级导航</a></li>
  </ul>
</div>
css部分
*{
 margin:0;
 padding:0;
}
.nav{
 background-color:#EEEEEE;
 height:40px;
 width:450px;
 margin:0 auto;
}
ul{
 list-style:none;
}
ul li{
 float:left;
 line-height:40px;
 text-align:center;
}
a{
 text-decoration:none;
 color:#000000;
 display:block;
 width:90px;
 height:40px;
}
a:hover{
 background-color:#666666;
 color:#FFFFFF;
}
ul li ul li{
 float:none;
 background-color:#EEEEEE;
}
ul li ul{
 display:none;
}
ul li ul li a:hover{
 background-color:#009933;
}
/*:hover 选择器用于选择鼠标指针浮动在上面的元素。*/
js部分
$(function(){
  $(".navmenu").mouseover(function(){
   $(this).children("ul").show(); 
  })
   
  $(".navmenu").mouseout(function(){
   $(this).children("ul").hide();
  })
})
 

用jquery制作一个二级导航下拉菜单的更多相关文章

  1. 纯CSS实现二级导航下拉菜单--css的简单应用

    思想:使用css的display属性控制二级下拉菜单的显示与否.当鼠标移动到一级导航菜单的li标签时,显示二级导航菜单的ul标签.由于实现起来比较简单,所以在这里直接给出了参考代码. 1.纯CSS二级 ...

  2. jQuery实现一个淡入淡出下拉菜单 非常简易

    前段时间我一直在向大家推荐CSS3和HTML5的东西,尽管看上去很炫,但也有不少网友抱怨兼容性问题,所以今天开始我也会陆续向大家介绍一些兼容性较好的jQuery插件.今天先分享一款利用jQuery实现 ...

  3. js二级导航下拉菜单

    <!DOCTYPE html> <html> <head> <title>导航列表</title> <meta http-equiv= ...

  4. (实用篇)jQuery+PHP+MySQL实现二级联动下拉菜单

    二级联动下拉菜单选择应用在在很多地方,比如说省市下拉联动,商品大小类下拉选择联动.本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联动效果. 先看下效果 大类:  前端技术 ...

  5. 用原生JS实现的一个导航下拉菜单,下拉菜单的宽度与浏览器视口的宽度一样(js+html+css)

    这个导航下拉菜单需要实现的功能是:下拉菜单的宽度与浏览器视口的宽度一样宽:一级导航只有两项,当鼠标移到一级导航上的导航项时,相应的二级导航出现.在本案例中通过改变二级导航的高度来实现二级导航的显示和消 ...

  6. MDNavBarView下拉导航菜单(仿美团导航下拉菜单)

    说到下拉导航菜单这个东西用得还真不少,细心算一下做开发以来这样的菜单已经写了第三次了,但基本都是不能复用.感觉特累人.不经意看到同事写一个类似的下拉菜单,但他引用了开源库仿大众菜单的库,大致看了一下, ...

  7. jQuery插件:模拟select下拉菜单

    没搞那么复杂,工作中,基本够用.. <!doctype html> <html> <head> <meta charset="utf-8" ...

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

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

  9. 基于jQuery带图标的多级下拉菜单

    之前为大家分享了很多导航菜单.今天我们要来分享一款很不错的jQuery左侧带小图标的多级下拉菜单,菜单是垂直的,每一个菜单项带有一个小图标,看起来非常专业.并且菜单支持无限极下拉,所以对各位Web开发 ...

随机推荐

  1. 自定义标签tld的使用

    在JSP中使用标签是很平常的事情,在制作自定义标签时,通常都需要写tld文件来定义标签的各种属性,对应的Java类,前缀等等.标签与tld文件紧紧相连,那么,到底应该怎么放置tld文件?在web.xm ...

  2. C++中stl的map

    总结: 在map中插入数据有三种方法: 1.用insert插入pair数据: mapstudent.insert(pair<int,string>(1,"studentone&q ...

  3. PAT 1021 个位数统计 (15)(C++&Java&Python)

    1021 个位数统计 (15)(15 分) 给定一个k位整数N = d~k-1~*10^k-1^ + ... + d~1~*10^1^ + d~0~ (0<=d~i~<=9, i=0,.. ...

  4. holiday(假期)_题解

    holiday(假期) —— 一道妙题(codevs3622)   Description 经过几个月辛勤的工作,FJ 决定让奶牛放假.假期可以在1…N 天内任意选择一段(需要连续),每一天都有一个享 ...

  5. 还没有写完准备弡上cpickle 还有字典

    #!/usr/bin/python #Filename: cpickle.py import cPickle as p import os shoplistfile="shoplist.da ...

  6. 让eclipse调试和豌豆荚并存

    豌豆荚有一个设置 设置->高级设置->开发者模式 勾上开发者模式 确定. 你什么手机的驱动都不用安装了. 就可以直接使用豌豆荚,也可以使用eclipse进行调试.

  7. Eigen中的map

    Map类用于通过C++中普通的连续指针或者数组 (raw C/C++ arrays)来构造Eigen里的Matrix类,这就好比Eigen里的Matrix类的数据和raw C++array 共享了一片 ...

  8. EditText输入小数

    edtValue.setInputType(InputType.TYPE_CLASS_NUMBER | InputType.TYPE_NUMBER_FLAG_DECIMAL);

  9. 【转】先说IEnumerable,我们每天用的foreach你真的懂它吗?

    [转]先说IEnumerable,我们每天用的foreach你真的懂它吗? 我们先思考几个问题: 为什么在foreach中不能修改item的值? 要实现foreach需要满足什么条件? 为什么Linq ...

  10. 解疑网络监控卡壳 视觉体验400ms延时

    http://security.zol.com.cn/413/4130220.html 我的眼睛可以轻松判断出400ms延时误差,你可以吗?很多用户都反映手机移动监控.PC远程监控视频会卡顿,抛开设备 ...