<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>jQuery实现导航栏</title>

    <style>

        *{

            padding:0;

            margin:0;

        }

        #navigation>ul{

            list-style: none;

        }

        #navigation>ul>li{

            float: left;

            width: 80px;

            height: 30px;

            background: #009f95;

            color: #ffffff;

            text-align: center;

            line-height: 30px;

            cursor:pointer;

        }

        #navigation>ul>li:hover{

            background:#0B61A4;

        }

        #navigation>ul>li>a{

            color:#fff;

            text-decoration:none;

        }

        #navigation>ul>li>ul{

            display:none;

        }

        #navigation>ul>li>ul>li{

            background: #00B83F;

            list-style: none;

        }

        #navigation>ul>li>ul>li:hover{

            background: #1E9FFF;

        }

        #navigation>ul>li>ul>li>a{

            color:#fff;

            text-decoration: none;

        }

    </style>

</head>

<body>

<div id="navigation">

    <ul>

        <li>

            <a href="">1</a>

            <ul>

                <li><a href="">11</a></li>

                <li><a href="">13</a></li>

                <li><a href="">14</a></li>

            </ul>

        </li>

        <li>

            <a href="">2</a>

            <ul>

                <li><a href="">21</a></li>

                <li><a href="">22</a></li>

                <li><a href="">23</a></li>

            </ul>

        </li>

        <li>

            <a href="">3</a>

        </li>

    </ul>

</div>

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

<script>

    $("#navigation>ul>li:has(ul)").hover(function(){

        //show

        $(this).children('ul').stop().slideDown();

    },function(){

        //hide

       $(this).children('ul').stop().slideUp();

    })

</script>

</body>

</html>

jQuery实现导航栏的更多相关文章

  1. jQuery Mobile 导航栏

    jQuery Mobile 导航栏 导航栏由一组水平排列的链接构成,通常位于页眉或页脚内部. 默认地,导航栏中的链接会自动转换为按钮(无需 data-role="button"). ...

  2. jquery实现导航栏跟随窗口滚动

    最近在制作一个模版的时候用到的一个jquery插件,当网站导航滚动到当前可见页面顶部时,固定在顶部并随窗口滚动,有很多的网站前台模版有有类似的效果. smohan.fixednav.js /* * 随 ...

  3. jquery 实现导航栏滑动效果

    精简的代码实现导航栏滑动效果,实现详解: 1.滑块位置:通过父节点position=fixed,子节点position=absolute方式,实现子节点浮动: 2.导航栏居中:通过left=0px,r ...

  4. 简单的jquery左侧导航栏和页面选中

    这里是要实现导航的左侧并选中的,此功能需引用jquery 左侧导航: <div class="box"> <ul class="menu"&g ...

  5. 简单的jquery左侧导航栏和页面选中效果

    这里是要实现导航的左侧并选中的,此功能需引用jquery 效果: 左侧导航 <div class="box"> <ul class="menu" ...

  6. jquery实现导航栏头部点击变换颜色

    实现效果如下: 话不多说直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  7. jquery实现导航栏鼠标点击后实行背景高亮，点击离开恢复（超级简单！！！！），jquery导航栏

    1.header部分要引入Jquery <asp:Content ID="HeaderContent" runat="server" ContentPla ...

  8. jquery实现导航栏效果

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

  9. JQuery Mobile - 导航栏选中状态代码

    class="ui-btn-active" 参考: https://wizardforcel.gitbooks.io/w3school-jqmobile/content/8.htm ...

随机推荐

  1. qt 拖放dropEvent

    1.拖放操作分为两个截然不同的动作: 拖动和放下. 拖动通过 void dragEnterEvent(QDragEnterEvent * event); 来实现. 放下通过 void dropEven ...

  2. ubuntu16下面安装vmware tools后仍然未全屏问题

    1.默认下载ubuntu16的iso镜像后,自带的有vmtools.解压 tar -xzvf  VMwareTools-10.0.6-3595377.tar.gz 进入解压目录. 执行:sudo ./ ...

  3. 毕向东_Java基础视频教程第21天_IO流（1）

    第21天-01-IO流(对象的序列化) ObjectInputStream与ObjectOutputStream 被操作的对象需要实现Serializable接口(标记接口) 非必须, 但强烈建议所有 ...

  4. 学习笔记：IIS搭建PHP网站出现404错误的解决办法

    关于404错误提示相信大家都遇到过吧,记得我遇到这个问题的时候,弄得我焦头烂额的,今天给大家分享下,使用IIS大家PHP网站时出现404错误提示的处理方法,希望对各位朋友有所帮助.IIS搭建PHP出现 ...

  5. 查询SQL Version详细信息

    下面是一个查询SQL Server版本并给出升级建议的SQL代码,用来学习写SQL代码. ------------------------------------------------------- ...

  6. 模型层（template）

    错误之forbbiddon csrf_token:这个标签用于跨站请求伪造保护 提交数据的时候就会做安全机制,当你点击提交的时候会出现一个forbbiddon 的错误,就是用setting配置里的sc ...

  7. win8 便签工具

    启动或显示 Sticky Notes : Win+R--->StikyNot.exe 备份Sticky Notes 保存位置 : %AppData%\Microsoft\Sticky Notes ...

  8. POP3、SMTP端口（SSL、TSL）

    POP3服务器地址: 110           995 支持SSLSMTP服务器地址: 25            465 或者 587 支持SSL(TSL) 465端口是SSL/TLS通讯协议的 ...

  9. IGraphicsContainer->AddElement函数

    纠结中．．．．．． IGraphicsContainer.AddElement函数应该是比较简单的,可能无论添加什么要素,就是无法显示出结果出来. 难道添加元素前是有什么需要设置的?或是其它一些原因? ...

  10. 乘风破浪：LeetCode真题_008_String to Integer (atoi)

    乘风破浪:LeetCode真题_008_String to Integer (atoi) 一.前言 将整型转换成字符串,或者将字符串转换成整型,是经常出现的,也是必要的,因此我们需要熟练的掌握,当然也 ...