jquery和css实现的一个级联菜单

作者: 来源: 更新时间:2013-01-24 14:14:18 点击:

最近在学些web前段的知识,看见博客园首页左侧的一个级联菜单,就想写一个demo.呵呵

<!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 runat="server">
    <title></title>
    <style type="text/css">
        *
        {
            padding: 0px;
            margin: 0px;
        }
        .dis_none
        {
            display: none;
        }
        .dis_block
        {
            display: block;
        }
        .subSheet
        {
            position: absolute;
            left: 100px;
            z-index: 10;
            width: 100px;           
        }
        ul
        {
            list-style: none;
        }
        li
        {
            border: 1px solid blue;
            width: 100px;
            background-color: Gray;
        }
        li a
        {
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ul>
            <li onmousemove="mouse_over(1010)" onmouseout="mouse_out(1010)"><a href="">.NET精华区</a>
                <div class="subSheet dis_none" id="1010">
                    <ul>
                        <li><a href="">新手入门</a></li>
                        <li><a href="">托管代码</a></li>
                        <li><a href="">非托管代码</a></li>
                    </ul>
                </div>
            </li>
            <li onmousemove="mouse_over(1011)" onmouseout="mouse_out(1011)"><a href="">嵌入式</a>
                <div class="subSheet dis_none" id="1011">
                    <ul>
                        <li><a href="">新手入门</a></li>
                        <li><a href="">嵌入式入门</a></li>
                        <li><a href="">嵌入式进阶</a></li>
                    </ul>
                </div>
            </li>
            <li onmousemove="mouse_over(1012)" onmouseout="mouse_out(1012)"><a href="">单片机</a>
                <div class="subSheet dis_none" id="1012">
                    <ul>
                        <li><a href="">新手入门</a></li>
                        <li><a href="">单片机入门</a></li>
                        <li><a href="">单片机进阶</a></li>
                    </ul>
                </div>
            </li>
            <li><a href="">软件测试</a></li>
        </ul>
    </div>
    </form>
</body>
</html>
<script src="Scripts/jquery-1.6.3.js" type="text/javascript"></script>
<script type="text/javascript">
    function mouse_over(i) {
        $("#" + i).removeClass("dis_none");
    }
    function mouse_out(i) {
        $("#" + i).addClass("dis_none");
    }
</script>