效果图如下：

HTML代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

    *{ margin: 0; padding: 0; list-style: none;}

    .nav{

        width: 300px;

        margin: 100px auto;

    }

    .nav li{

        width: 100px;

        height: 40px;

        line-height: 40px;

        float: left;

        text-align: center;

    }

    .nav li a{

        display: block;

        height: 40px;

        text-decoration: none;

        color: #333;

        background: #ccc;

    }

    .nav li a:hover{

        background: pink;

    }

    .nav li ul{

        display: none;

    }

    </style>

    <script src="js/jquery-1.12.4.min.js"></script>

    <script>

    $(function(){

        $('.nav li').mouseover(function(){

            $(this).children('ul').css('display','block');

        });

        $('.nav li').mouseout(function(){

            $(this).children('ul').css('display','none');

        });

    })

    </script>

</head>

<body>

    <div class="nav">

            <ul>

                    <li>

                        <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>

                        <ul>

                            <li><a href="###">杨幂</a></li>

                            <li><a href="###">柳岩</a></li>

                            <li><a href="###">赵丽颖</a></li>

                        </ul>

                    </li>

                    <li>

                        <a href="###">导演</a>

                        <ul>

                            <li><a href="###">冯小刚</a></li>

                            <li><a href="###">张艺谋</a></li>

                            <li><a href="###">丁黑</a></li>

                        </ul>

                    </li>

                </ul>

    </div>

</body>

</html>

JS使用的是jQuery函数库，下载地址见另一篇博文。

JQuery实现子级选择器的更多相关文章

  1. JQuery实现父级选择器(广告实现)

    效果图如下: HTML代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  2. Jquery遍历之获取子级元素、同级元素和父级元素

    Jquery遍历之获取子级元素.同级元素和父级元素 Jquery的遍历,其实就当前位置的元素相对于其他元素的位置的关系进行查找或选取HTML元素.以某项选择开始,并沿着这条线进行移动,或向上(父级). ...

  3. 深入学习jQuery选择器系列第八篇——过滤选择器之伪子元素选择器

    × 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 本文是子元素选择器的续篇,主要介绍关于nth-of-type()选择器的内容.该部分内容并非没有出现在<锋利的 ...

  4. 深入学习jQuery选择器系列第二篇——过滤选择器之子元素选择器

    × 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 在上一篇中已经介绍过基础选择器和层级选择器,本文开始介绍过滤选择器.过滤选择器是jQuery选择器中最为庞大也是最为 ...

  5. jquery子元素选择器

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

  6. jQuery中的层级选择器（四、二）：后代元素、子元素、相邻元素、兄弟元素

    <!DOCTYPE html> <html> <head> <title>层次选择器</title> <meta http-equiv ...

  7. 读<jquery 权威指南>[1]-选择器及DOM操作

    今天是小年了,2013马上要过去了,但是学习不能间断啊.最近正在看<jQuery权威指南>,先温习一下选择器和DOM操作. 一.基本选择器 1.table单双行: $(function ( ...

  8. JQuery 基本知识，选择器，事件，DOM操作

    一.基本知识 Jquery是什么? 它就是一套JS方法包,jQuery是一个快速,小巧,功能丰富的JavaScript库.它使得HTML文档遍历和操作,事件处理,动画和Ajax更容易使用易于使用的AP ...

  9. 前端基础-jQuery的内容之选择器

    阅读目录 ID选择器 类选择器 元素选择器 通配符选择器 层级选择器 基本筛选器 内容筛选器 可见性筛选器 属性筛选器 子元素筛选器 表单元素筛选器 表单对象筛选器 this和$(this) 一.jQ ...

随机推荐

  1. rake 任务参数传递问题解决

    原文 :  https://robots.thoughtbot.com/how-to-use-arguments-in-a-rake-task namespace :tweets do desc 'S ...

  2. Building the main Guest Additions module [FAILED]

    虚拟机中的centos7安装vbox的增强工具报错 Building the main Guest Additions module [FAILED] 查看日志发现 unable to find th ...

  3. #define\const\inline的区别与联系

    总结: const用于代替#define一个固定的值,inline用于代替#define一个函数.是#define的升级版,为了消除#define的缺陷. 参考内容:http://www.cnblog ...

  4. Linux的cron服务

    可以用以下命令启动和停止服务: /sbin/service crond start /sbin/service crond stop /sbin/service crond restart /sbin ...

  5. Spring Boot（一）Hello World

    Spring Boot适合与微服务,方便快速开发,简化配置(约定>配置). 准备工作: SpringBoot 2.0 jdk8 IDEA或者eclipse+Spring Tool Suits 创 ...

  6. C#取得程序的根目录以及判断文件是否存在

    一:获取根目录的方法 取得控制台应用程序的根目录方法方法1.Environment.CurrentDirectory 取得或设置当前工作目录的完整限定路径方法2.AppDomain.CurrentDo ...

  7. npm下载某个版本

    如果我想要引入的是Jquery的1.7.2版本,则输入npm intall jquery@1.7.2,那么npm包管理器就会帮助你下载jquery1.7.2的版本到你当前操作目录下的node_modu ...

  8. 【起航计划 020】2015 起航计划 Android APIDemo的魔鬼步伐 19 App->Dialog Dialog样式

    这个例子的主Activity定义在AlertDialogSamples.java 主要用来介绍类AlertDialog的用法,AlertDialog提供的功能是多样的: 显示消息给用户,并可提供一到三 ...

  9. u-boot分析（二）----工作流程分析

    u-boot分析(二) 由于这两天家里有点事,所以耽误了点时间,没有按时更新,今天我首先要跟大家说说我对于u-boot分析的整体的思路,然后呢我以后的博客会按照这个内容更新,希望大家关注. 言归正传, ...

  10. php的yii框架开发总结9

    这一篇讲解怎么实现的自动发邮件的功能,我在网上查了很多资料,很多都是用定时检测来实现的,我试过,效率太低,网站也卡了. 后来就写了一个.bat文件来实现刷新页面,用了windows的定时任务定时来运行 ...