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. mySLQ数据库 练习题

    MySQL 练习题1 DROP TABLE IF EXISTS `liuyan`; CREATE TABLE `liuyan` ( `id` int(11) NOT NULL AUTO_INCREME ...

  2. RabbitMQ消息队列(一):详细介绍

    1. 历史 RabbitMQ是一个由erlang开发的AMQP(Advanced Message Queue )的开源实现.AMQP 的出现其实也是应了广大人民群众的需求,虽然在同步消息通讯的世界里有 ...

  3. Luogu 2279 [HNOI2003]消防局的设立 - 贪心

    Description 给定一棵树形图, 建若干个消防站, 消防站能够覆盖到距离不超过2的点, 求最少需要建几个消防站才能覆盖所有点 Solution 从深度最深的点开始, 在它的爷爷节点上建, 每建 ...

  4. 20172306《Java程序设计与数据结构》第十周学习总结

    20172306<Java程序设计>第十周学习总结 教材学习内容总结 本章主要的讲的是集合有关的知识: 1.集合与数据结构 - 集合是一种对象,集合表示一个专用于保存元素的对象,并该对象还 ...

  5. Netty 源码 ChannelHandler(四)编解码技术

    Netty 源码 ChannelHandler(四)编解码技术 Netty 系列目录(https://www.cnblogs.com/binarylei/p/10117436.html) 一.拆包与粘 ...

  6. [Hbase]Hbase章1 Hbase框架及基本概念

    Hbase框架介绍 HBase是一个分布式的.面向列的开源数据库. 不同点: l  和一般的关系数据库不同,hbase是一个适合于非结构化数据存储的数据库. l  Hbase是基于列而不是基于行的模式 ...

  7. js实现环形菜单效果

    点击中间的圆点,会弹出环形菜单,效果图: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF- ...

  8. Java学习笔记:注解Annotation

    annotation的概念 In the Java computer programming language, an annotation is a form of syntactic metada ...

  9. mui-手动触发下拉刷新

    mui-手动触发下拉刷新   下拉刷新结束 mui官方文档中下拉刷新结束方法,不生效, 文档地址 1 mui('#refreshContainer').pullRefresh().endPulldow ...

  10. java数组元素倒置

    package dataStructure; import java.util.Arrays; import java.util.ArrayList; public class Test1 { sta ...