效果图如下：

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. pta5-9 Huffman Codes (30分)

    5-9 Huffman Codes   (30分) In 1953, David A. Huffman published his paper "A Method for the Const ...

  2. Andrew Ng 的 Machine Learning 课程学习 (week3) Logistic Regression

    这学期一直在跟进 Coursera上的 Machina Learning 公开课, 老师Andrew Ng是coursera的创始人之一,Machine Learning方面的大牛.这门课程对想要了解 ...

  3. C++/CLI中的const literal initonly 友元（转）

    C++/CLI中的const literal initonly 友元 C++/CLI中的const Visual C++并不允许在const对象上调用成员函数,除非该成员函数也被声明为const. C ...

  4. Linux访问https报错

    今天用Linux(CentOS)拉Git仓库时,报了个错unable to access 'https://github.com/Wind4/vlmcsd.git/': SSL connect err ...

  5. ThinkPHP报Class 'Core\Log' not found竟然是由这个原因导致的

    项目在开发阶段运行的好好的(Debug=true),上线后(Debug=false)其中有一个页面报“对不起,您的页面暂进无法找到!”错误.摸不清头脑,看看了这个页面也没有什么两样,可就是提示这句话, ...

  6. 粗看ES6之字符串

    标签: javascript es6 字符串新增特性 新增二个方法 - startsWith/endsWith 字符串模板 - 反单引号的应用 startsWith 判断字符串以是否以某某开头,返回一 ...

  7. Linux yum apt-get 方式

    Linux 大致可以分两大类   RedHat分支 redhat, centos ,mandrake,mandriva,国产的红x等 1 常见的安装包格式 rpm包,安装rpm包的命令是“rpm -参 ...

  8. cookie 的 写入，读取， 删除

    页面跳转,cookie存储参数 1,设置cookie function setCookie(name,value) { var Days = 30; var exp = new Date(); exp ...

  9. List之Sort使用

    void TestListSort(){ List<string> st = new List<string> (); st.Add ("abcd"); s ...

  10. 如何解决ArcGIS Runtime SDK for Android中文标注无法显示的问题

    自10.2版本开始,我就一直被ArcGIS Runtime SDK for Android的中文标注无限困扰.无论是驻留于内存中的Graphic 的文本符号TextSymbol,还是新增的离线geod ...