zoukankan      html  css  js  c++  java
  • 简单的下拉菜单

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8" />

    <title></title>

    <script type="text/javascript" src="js/jquery-1.11.1.js" ></script>

    <script>

    $(document).ready(function(){

     

    $("span").mouseover(function(){

    //拿兄弟标签

    $(this).nextAll("li").slideToggle();

    //拿父标签 在拿子标签

    // var s=$(this).parent("ul").children("li").slideToggle();

    // console.log(s.length);

    });

    $("span").mouseout(function(){

    $(this).nextAll("li").slideToggle();

     

    // var s=$(this).parent("ul").children("li").slideToggle();

    // console.log(s.length);

    });

     

     

    });

    </script>

    <style type="text/css">

    body {

                background:url(http://img3.iqilu.com/data/attachment/forum/201308/21/171204uuemoyup4go3ksum.jpg)

            }

          *{

          margin: 0;

          padding: 0;

          }

     

    div{

    position: relative;

    top: 300px;

    left: 300px;

    height: 40px;

    width: 450px;

    border-radius: 5px;

    background-color: #fff;

     

    }

    ul{

    float: left;

    margin-left:40px;

     

    }

    li{

    list-style: none;

      position: relative;

        /*top: 20px;*/

        height: 40px;

        width: 80px;

        color: red;

        background-color: beige;

        border-radius: 5px;

        box-shadow: 0 0 5px rgba(0,0,0,0.5);

        line-height: 40px;

        opacity: 0.7;

        text-align: center;

        display: none;

    }

    span{

    display: inline-block;

    position: relative;

        /*top: 20px;*/

        height: 40px;

        width: 80px;

        color: red;

        background-color: beige;

        border-radius: 5px;

        box-shadow: 0 0 5px rgba(0,0,0,0.5);

        line-height: 40px;

        opacity: 0.7;

        text-align: center;

    }

    </style>

    </head>

    <body>

    <div >

    <ul id="ul1">

    <span id="s3">1111</span>

    <li>565456</li>

    <li>35456</li>

    <li>87489</li>

    <li>3546</li>

    </ul>

    <ul id="ul2">

    <span id="s2">1111</span>

    <li>565456</li>

    <li>35456</li>

    <li>87489</li>

    <li>3546</li>

    </ul>

    <ul id="ul3">

    <span id="s1">1111</span>

    <li>565456</li>

    <li>35456</li>

    <li>87489</li>

    <li>3546</li>

    </ul>

    </div>

     

    </body>

    </html>

  • 相关阅读:
    真正的e时代
    在线手册
    UVA 10616 Divisible Group Sums
    UVA 10721 Bar Codes
    UVA 10205 Stack 'em Up
    UVA 10247 Complete Tree Labeling
    UVA 10081 Tight Words
    UVA 11125 Arrange Some Marbles
    UVA 10128 Queue
    UVA 10912 Simple Minded Hashing
  • 原文地址:https://www.cnblogs.com/zzzhangzheng/p/6020848.html
Copyright © 2011-2022 走看看