2019.03.26

最新推荐文章于 2019-09-08 18:55:39 发布

zxm996

最新推荐文章于 2019-09-08 18:55:39 发布

阅读量112

点赞数

本文链接：https://blog.csdn.net/zxm996/article/details/88918491

版权

二级导航栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css " >
        *{
            margin: 0;
            padding: 0;
        }
        #nav{
            background-color:darkgrey ;
            width: 600px;
            height: 40px;
            margin: 0 auto;
        }
        ul li{
           list-style: none ;
            float: left ;
            line-height: 40px;
            text-align: center ;
            position: relative ;
        }
        a{
            text-decoration: none ;
            color:#33b5e5  ;
            padding:0 20px;
            width: 100px;
        }
        a:hover {
            background-color: #78a95c;
            color: #77e55d;
        }
        ul li ul{
            position:absolute ;
            top:20px ;
            left: 0px;
        }
        ul li ul li{
            float: none ;
            background-color:blueviolet;
            margin: 1px 0;
            display:none  ;
        }
        ul li ul li a{
            background-color: #9933cc;
        }
        ul li :hover ul li{
            display:block ;
        }

    </style>
</head>
<body>
<div id="nav">
<ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">课程大厅</a></li>
    <ul>
        <li><a href="#" >web网页实战</a></li>
        <li><a href="#" >服务端技术</a></li>
        <li><a href="#" >python开发</a></li>


    </ul>
    <li><a href="#">学习中心</a></li>
    <li><a href="#">经典案列</a></li>
    <li><a href="#">关于我们</a></li>
</ul>
</div>
</body>
</html>

JQuer介绍
1、是一个快速简介的JavaScript，是继prototype之后一个优秀的代码库
2、基础语言$
美元符号“$”定义jQuery
选择器（selector）“查询”和“查找”HTML元素
jQuery的action()执行对元素的操作
代码

<script type="text/javascript">
    $(document).ready(function(){
       $(".A>a").click(function(){
           $(this).addClass("current")
                   .next.show()
                   .parent().siblings().childrend("a").removeClass("current")
                   .next().hide();
           return false;
       });
    });
</script>
<ul class="1">
    <li class="2">
        <a href="#">a</a>
        <ul class="##">
            <li><a href="###">*</a></li>
            <li><a href="####">**</a></li>
            <li><a href="#####">***</a></li>
            <li><a href="######">****</a></li>
        </ul>
    </li>
</ul>

zxm996

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2019.03.26

二级导航栏<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css " > *{ margi...
复制链接

扫一扫