zoukankan      html  css  js  c++  java
  • jQuery新浪top栏下拉效果小组件

    <!DOCTYPE html>

    <html lang="en">

     

    <head>

    <meta charset="UTF-8">

    <title>train02</title>

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

    <style>

    * {

    margin: 0;

    padding: 0;

    }

     

    li {

    list-style-type: none;

    }

     

    a {

    text-decoration: none;

    font-size: 14px;

    }

     

    .nav {

    margin: 100px;

    }

     

    .nav>li {

    position: relative;

    float: left;

    80px;

    height: 41px;

    text-align: center;

    }

     

    .nav li a {

    display: block;

    100%;

    height: 100%;

    line-height: 41px;

    color: #333;

    }

     

    .nav>li>a:hover {

    background-color: #eee;

    }

     

    .nav ul {

    display: none;

    position: absolute;

    top: 41px;

    left: 0;

    100%;

    border-left: 1px solid #FECC5B;

    border-right: 1px solid #FECC5B;

    }

     

    .nav ul li {

    border-bottom: 1px solid #FECC5B;

    }

     

    .nav ul li a:hover {

    background-color: #FFF5DA;

    }

    </style>

    </head>

     

    <body>

    <ul class="nav">

    <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>

    <li>

    <a href="#">微博</a>

    <ul>

    <li>

    <a href="">私信</a>

    </li>

    <li>

    <a href="">评论</a>

    </li>

    <li>

    <a href="">@我</a>

    </li>

    </ul>

    </li>

    </ul>

    <script>

    // 事件切换 hover 如果只写一个函数,那么鼠标经过和鼠标离开都会触发这个函数

    $(function () {

    $(".nav>li").hover(function () {

    // stop 方法必须写到动画的前面

    $(this).children("ul").stop().slideToggle();

    });

    })

    </script>

    </body>

     

    </html>

  • 相关阅读:
    BUUCTF--Youngter-drive
    BUUCTF--CrackRTF
    FireShell CTF 2020 Re Simple Encryption
    2020 美国大学生数学建模论文翻译(week 2)
    仿射密码
    乘法逆元
    RC4加密与解密
    2020 BJDCTF Re encode
    2020美国大学生数学建模(MCM/ICM)A题数据及参考资料
    路由器, 美团笔试题, 差分
  • 原文地址:https://www.cnblogs.com/dax520/p/13958200.html
Copyright © 2011-2022 走看看