下拉菜单选项

原创 2016-11-10 14:25:57 392
摘要:<!DOCTYPE html> <html>     <head>         <meta charset="utf-8" /> //导入jQuery的库   
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
//导入jQuery的库
        <script type="text/javascript" src="jquery-1.11.1.js" ></script>
        <title>下拉菜单</title>
        <style>
  //静态界面的布局
             * {
            padding: 0;
            margin: 0;
        }
        ul {
            list-style: none;
        }
        .all {
            width: 900px;
            height:40px;
            margin: 100px auto 0;
                background-color:lightslategray;
                border-radius: 10px;
            padding-left: 10px;
            padding-bottom: 3px;
        }
        .all li {
            float: left;
            width: 140px;
            height: 40px;
            margin-right: 10px;
            position: relative;
            margin-top: 3px;
            
        }
        .all a {
            color: white;
            text-decoration: none;
            display: block;
            width: 140px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            background-color:lightslategray;
            font-size: 18px;
             border-radius: 10px;
        }
        .all li ul {
            position: absolute;
            display: none;
        }
         
         .all  a:hover{
             color: red;
         }
        </style>
            <script>
  //jQuery部分,当我移动到 无序列表上的时候让隐藏的部分显示出来
        $(document).ready(function () {
            
            $(".all li").hover(function () {
                $(this).children("ul").slideToggle();
            });
        });
    </script>
    </head>
    <body>
//静态界面的搭建
        <div class="all">
            <ul>
                <li><a href="#">官网首页</a>
                    <ul>
                    <li><a href="#">新手指引</a></li>
                    <li><a href="#">资料库</a></li>
                    <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>
                    <li><a href="#">英雄联盟画册</a></li>
                    <li><a href="#">网吧特权</a></li>
                    <li><a href="#">LOL信用卡</a></li>
                </ul>
            </li><li>
                    <a href="#">用户互动</a>
                <ul>
                    <li><a href="#">在线服务</a></li>
                    <li><a href="#">活动中心</a></li>
                    <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="#">LPL职业联赛</a></li>
                    <li><a href="#">甲级职业联赛</a></li>
                    <li><a href="#">德玛西亚杯</a></li>
                    <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>
                    <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>
       
   </div>
        
    </body>
</html>
发布手记

热门词条