效果图如下：

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. [PHP]Mysql的运用

    1.创建数据库和表,代码如下: //创建数据库函数 function createDB($DBname){ $query="CREATE DATABASE $DBname"; re ...

  2. C语言实现通用链表初步(一)

    注意:本文讨论的是无头单向非循环链表. 假设不采用Linux内核链表的思路,怎样用C语言实现通用链表呢? 一种常用的做法是: typedef int element_t; struct node_in ...

  3. Http Client 源码分析

    /** * 此接口仅代表HTTP请求执行的最基本约定. * 它对请求执行过程没有任何限制或特定的细节,并将状态管理.身份验证和重定向处理的细节留给单个实现. */ public interface H ...

  4. ICSharpCode.SharpZipLi 压缩、解压文件 附源码

    http://www.icsharpcode.net/opensource/sharpziplib/ 有SharpZiplib的最新版本,本文使用的版本为0.86.0.518,支持Zip, GZip, ...

  5. 初学者配置第一个spring mvc Demo

    1.web.xml的配置 <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi= ...

  6. c#-day04学习笔记

    面向对象 类与对象: C#的类和对象是用于在程序中模拟现实生活中的事务的 C#中的类是一种数据类型,用来定义对象的类型的 C#的对象是类的实例,是基于[给定数据类型]的具体的一个实例 小结: 类是对象 ...

  7. Hibernate课程 初探一对多映射3-3 单向多对一的测试

    public static void testManyToOne(){ Student stu1 = new Student("小明","男"); Studen ...

  8. idea 插件描述（转）

    提供些idea插件的干货.干货.干货! 如何安装idea plug,方法如下图:如果安装不了考虑下是否代理问题: 1,maven helper 以前查看maven依赖都比较麻烦,需要用命令maven ...

  9. JS之获取子节点

    在JS中获取子节点有以下几种方法: firstElementChild.firstChild.childNodes和children 我们通过一个例子来分析这几种方法的区别(获取div下的p标签) 输 ...

  10. bai_du 采集代码（已过期）

    <?php $url = "http://www.baidu.com/s?wd=site:www.xxxxxx.com+inurl:hot&tn=baidulaonian&am ...