效果图如下：

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. .NET平台下使用C#连接各种数据库

    在.NET平台下,通常我们需要连接不同的数据库,这就需要我们配置连接字符串以及提供常用的class进行数据存取. 1.C#连接Access @"Provider=Microsoft.ACE. ...

  2. ThreadPoolExecutor的三种队列SynchronousQueue，LinkedBlockingQueue，ArrayBlockingQueue

    SynchronousQueue SynchronousQueue是无界的,是一种无缓冲的等待队列,但是由于该Queue本身的特性,在某次添加元素后必须等待其他线程取走后才能继续添加:可以认为Sync ...

  3. Zend Optimizer安装、配置

    Zend Optimizer用优化代码的方法来提高php应用程序的执行速度.实现的原理是对那些在被最终执行之前由运行编译器(Run-Time Compiler)产生的代码进行优化.这里,我们下载最新版 ...

  4. schema中属性声明

    <attribute name="属性名"   default="默认值"  fixed="固定值" use="option ...

  5. .NET开发人员必知的八个网站

    当前全球有数百万的开发人员在使用微软的.NET技术.如果你是其中之一,或者想要成为其中之一的话,我下面将要列出的每一个站点都应该是你的最爱,都应该收藏到书签中去.对于不熟悉.NET技术的朋友,需要说明 ...

  6. MySQL(三) 完整性约束

    一.介绍 约束条件与数据类型的宽度意义,都是可选参数. 作用:用于保证数据的完整性和一致性. 主要分为: PRIMARY KEY (PK) 标识该字段为该表的主键,可以唯一的标识记录 FOREIGN ...

  7. vue-样式问题

    问题: 今天在用vue开发单页面应用的时候,遇到一个问题,在A页面,直接刷新,页面的布局样式之类的是没有问题的,不过在B页面跳转到A页面,那么A页面有一些样式就不是预期的效果. 发现解决问题: 用调试 ...

  8. java分页三个类 PageBean ResponseUtil StringUtil

    package ssmy.page; /** * 分页类 * @author Jesse * */public class PageBean { private int page;//第几页 priv ...

  9. （11）JavaScript之[DOM HTML][DOM CSS]

    DOM HTML //改变HTML输出流 document.write(Date()); //改变HTML的内容 document.getElementById('box').innerHTML = ...

  10. selenium代理

    selenium.KeyDown("id=ctaskName", "d");            selenium.KeyPress("id=cta ...