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

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    * {
    margin: 0;
    padding: 0;
    }

    ul {
    list-style: none;
    }

    .wrap {
    330px;
    height: 30px;
    margin: 100px auto 0;
    padding-left: 10px;
    background-image: url(images/bg.jpg);
    }

    .wrap li{
    background-image: url(images/libg.jpg);
    }

    .wrap > ul > li {
    float: left;
    margin-right: 10px;
    position: relative;
    }

    .wrap a {
    display: block;
    height: 30px;
    100px;
    text-decoration: none;
    color: #000;
    line-height: 30px;
    text-align: center;
    }

    .wrap li ul {
    position: absolute;
    top: 30px;
    display: none;
    }

    </style>
    <script src="jquery-1.12.2.js"></script>
    <script>
    $(function () {
    //获取.wrap下面的ul中的li,注册鼠标进入和离开的事件
    $(".wrap>ul>li").mouseover(function () {
    //鼠标进入
    $(this).children("ul").show(500);//显示
    });
    $(".wrap>ul>li").mouseout(function () {
    //鼠标离开
    $(this).children("ul").hide(500);//显示
    });
    });
    </script>
    </head>
    <body>
    <div class="wrap">
    <ul>
    <li>
    <a href="javascript:void(0);">帅哥系列</a>
    <ul>
    <li><a href="javascript:void(0);">乔峰</a></li>
    <li><a href="javascript:void(0);">张无忌</a></li>
    <li><a href="javascript:void(0);">郭靖</a></li>
    </ul>
    </li>
    <li>
    <a href="javascript:void(0);">美女系列</a>
    <ul>
    <li><a href="javascript:void(0);">柳 岩</a></li>
    <li><a href="javascript:void(0);">杨 幂</a></li>
    <li><a href="javascript:void(0);">萝 拉</a></li>
    </ul>
    </li>
    <li>
    <a href="javascript:void(0);">渣男妇腐女</a>
    <ul>
    <li><a href="javascript:void(0);">凤姐</a></li>
    <li><a href="javascript:void(0);">助教</a></li>
    <li><a href="javascript:void(0);">导师</a></li>
    </ul>
    </li>
    </ul>
    </div>
    </body>
    </html>

  • 相关阅读:
    rabbitmq-高级(死信队列)
    rabbitmq-高级(TTL过期时间)
    springboot整合rabbitmq(topic主题模式)
    springboot整合rabbitmq(direct路由模式)
    glide图片加载库
    自己封装的OKhttp请求
    手机上搭建微型服务器
    listview实现点击条目上的箭头展开隐藏菜单。
    recycleview + checkbox 实现单选
    recycleview中使用checkbox导致的重复选中问题
  • 原文地址:https://www.cnblogs.com/pxxdbk/p/12668828.html
Copyright © 2011-2022 走看看