How to display a div on the hover of an hyperlink

    <br />
    <br />
    <br />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type = "text/javascript">
        $("[id*=lnk]").live("mouseover", function () {
            var p = GetScreenCordinates(this);
            var div = $("#" + $(this)[0].id.replace("lnk", "dv"));
            div.css({ left: p.x + 10, top: p.y - 40, position: "absolute" });
            div.show();
        });
        $("[id*=lnk]").live("mouseout", function () {
            var div = $("#" + $(this)[0].id.replace("lnk", "dv"));
            div.hide();
        });
        function GetScreenCordinates(obj) {
            var p = {};
            p.x = obj.offsetLeft;
            p.y = obj.offsetTop;
            while (obj.offsetParent) {
                p.x = p.x + obj.offsetParent.offsetLeft;
                p.y = p.y + obj.offsetParent.offsetTop;
                if (obj == document.getElementsByTagName("body")[0]) {
                    break;
                }
                else {
                    obj = obj.offsetParent;
                }
            }
            return p;
        }
    </script>

        <a id = "lnk1" href = "javascript:;">Link 1</a>
        <div id = "dv1" style = "display:none;background-color:Red;color:White;height:40px;width:100px">DIV 1</div>