zoukankan      html  css  js  c++  java
  • jquery 左侧展开栏目

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>my_news</title>
    <style>
    *{padding:0;list-style:none;margin:0;}
    body{background:#666;}
    .linBox{margin-top:10px;margin-left:10px;70px;}
    .linBox ul li a{color:#fff; font-size:12px; text-decoration:none;background:#333;padding:8px;margin:4px;float:left;border:1px solid #fff;position:relative; 100px;}
    .linBox ul li .linBoxList{background:#ccc; height:330px;300px;position:absolute; left:118px;border:1px solid #fff; font-size:12px;color:#000;padding:10px;display:none;top:14px;z-index:1;}
    </style>
    <script type="text/javascript" src="./js/jquery-1.7.1.min.js"></script>
    <script>
    $(document).ready(function(){
        $(".linBox ul li").hover(function(){
            $(this).find(".linBoxList").show();
        },
        function(){
            $(this).find(".linBoxList").hide();
        });
    });
    </script>
    </head>
    <body>
    <div class="linBox">
        <ul>
            <li>
                <a href="">xxxxxxxxxx</a>
                <div class="linBoxList">
                <a href="">mmmmmm</a> <a href="">mmmmmm</a> <a href="">mmmmmm</a>
                </div>
            </li>

            <li>
                <a href="">yyyyyyyyyyy</a>
                <div class="linBoxList">
                <a href="">yyyyyyyyyy</a>
                </div>
            </li>

            <li>
                <a href="">zzzzzzzzzz</a>
                <div class="linBoxList">
                <a href="">zzzzzzzzz</a>
                </div>
            </li>

            <li>
                <a href="">xxxxxxxxxx</a>
                <div class="linBoxList">
                <a href="">1111111111111</a>
                </div>
            </li>

            <li>
                <a href="">xxxxxxxxxx</a>
                <div class="linBoxList">
                <a href="">1111111111111</a>
                </div>
            </li>
        </ul>
    </div>
    </body>
    </html>

  • 相关阅读:
    ts 与 C#的 一个差异的地方
    .net core的 几个模板比较
    iOS 绘画学习(3)
    在你的iPad上调整图片尺寸
    Pholio应用开发指南:通过平铺组成大的图片
    学会爱上iOS自动布局(Auto Layout)
    iOS 绘画学习(2)
    iOS 绘画学习(1)
    iOS 证书管理、验证、打包流程
    UIScrollView 技巧(2)
  • 原文地址:https://www.cnblogs.com/lin3615/p/3590777.html
Copyright © 2011-2022 走看看