老鼠划猫须

导航侧栏 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="三层复习2013_04_22.WebForm2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #ceng {
            float:right;
            display:none;
            width:150px;
            margin-top:-39px;
            position:absolute;
            margin-left:150px;
            border-left:1px solid #fff;
            background-color:#000;
        }
        ul {
            list-style: none;
            width:150px;
                
            text-indent:0px;
            background-color:#000;
        }
        li {
            background-color:#943e00;
            padding:10px 0 10px 20px;
            margin-left:-40px;
            cursor:pointer;
            border-bottom:1px solid #000;
        }
            li:hover {
                background-color:#aaa;
            }
        #div2 {
            width: 150px;
            background-color:#000;
        }
    </style>
    <script src="Jquery1.7.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#div2 ul>li').mouseover(function () {
                $('#ceng ul').remove();
                $('#ceng').css('display', 'block');
                var a = '<ul>';
                for (var i = 0; i < 5; i++) {
                    a+='<li>'+$(this).text()+'</li>';
                }
                $('#ceng').append(a + '</ul>');
                //alert($('#ceng').offset('left'));
                $(this).after($('#div3'));
                $('#ceng').css('float','right');
                
            })
            $('#div2 ul>li').mouseout(function () {
                $('#ceng').css('display', 'none');
            })
            $('#ceng').mouseover(function () {
                $('#ceng').css('display', 'block');
            })
            $('#ceng').mouseout(function () {
                $('#ceng').css('display', 'none');
            })
        })
        alert(this.document.getElementById('ceng').offsetLeft());
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div id="div3">
<div id="ceng"></div>
        </div>
        
    <div id="div2">
        <ul>
            <li>
                1.2.3.4.5..
            </li>
            <li>
                你是我的谁
            </li>
            <li>
                谁是谁的谁
            </li>
        </ul>
    </div>
    </form>
</body>
</html>

posted on 2013-04-23 10:35  昔日流年  阅读(172)  评论(0)    收藏  举报

导航