帮我看看，这个Javascript菜单那里错了？实现不了我想实现的效果。

当鼠标移动到“C/C++/C#”这个LI上边的时候，就显示指定的子菜单。显示是显示了，但位置不对，我想显示的位置是当前LI的顶部和最右边。TOP/RIGHT位置。位置不对之余，子菜单我指定一个onmouseout事件，但还没有onmouseout出去，已经隐藏了……。
请各位朋友帮我修改修改。如何让位置显示正确？如何上鼠标离开子菜单时候正确隐藏？
<!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=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
var lastID;function ShowMenu(Obj,Sub_Menu)
{
if(lastID)
{
document.getElementById(Sub_Menu).style.display="none";
}

var submenu2 = document.getElementById(Sub_Menu);
submenu2.style.left = Obj.offsetLeft + Obj.offsetWidth + "px";
submenu2.style.top = Obj.offsetTop + "px";
submenu2.style.display= "block";
lastID = submenu2.id;
}function HideThis(Obj)
{
Obj.style.display = "none";
}
</script><style type="text/css">
body
{
margin:0;
padding:0;
}#menu_tree ul
{
margin:0;
padding:0;
}
#menu_tree li
{
width:100px;
height:30px;
border:1px #000 solid;
}.child_menu
{
position:absolute;
color:#fff;
background:#993300;
width:200px;
height:300px;
}</style>
</head><body>
<ul style="width:150px;" id="menu_tree">
<li onmouseover="ShowMenu(this,'Sub_Menu1')">C/C++/C#</li>
<li onmouseover="ShowMenu(this,'Sub_Menu2')">Java</li>
</ul>
<div id="Sub_Menu1" class="child_menu" onmouseout="HideThis(this);" style="display:none;">
<dl>
<li>C/C++/C#</li>
<li>C/C++/C#</li>
</dl>
</div>
<div id="Sub_Menu2" class="child_menu" onmouseout="HideThis(this);" style="display:none;">
<dl>
<li>Java</li>
<li>Java</li>
</dl>
</div>
</body>
</html>

解决方案 »

  1.   

    <!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=gb2312" />
    <title>无标题文档</title>
    <script type="text/javascript">
    var lastID;function ShowMenu(Obj,Sub_Menu)
    {
        if(lastID)
        {
            document.getElementById(Sub_Menu).style.display="none";
        }
        
        var submenu2 = document.getElementById(Sub_Menu);
        submenu2.style.left = Obj.parentNode.offsetLeft + Obj.offsetWidth + "px";
        submenu2.style.top = Obj.offsetTop + "px";
        submenu2.style.display= "block";
        lastID = submenu2.id;
    }function HideThis(Obj)
    {
        Obj.style.display = "none";
    }
    </script><style type="text/css">
    body
    {
    margin:0;
    padding:0;
    }#menu_tree ul
    {
    margin:0;
    padding:0;
    }
    #menu_tree li
    {
    width:100px;
    height:30px;
    border:1px #000 solid;
    }.child_menu
    {
    position:absolute;
    color:#fff;
    background:#993300;
    width:200px;
    height:300px;
    }</style>
    </head><body>
        <ul style="width:150px;" id="menu_tree">
            <li onmouseover="ShowMenu(this,'Sub_Menu1')" onmouseout="HideThis(document.getElementById('Sub_Menu1'))">C/C++/C#</li>
            <li onmouseover="ShowMenu(this,'Sub_Menu2')" onmouseout="HideThis(document.getElementById('Sub_Menu2'))">Java</li>
        </ul>
        <div id="Sub_Menu1" class="child_menu" onmouseover="this.style.display='block'" onmouseout="HideThis(this);" style="display:none;">
            <dl>
                <li>C/C++/C#</li>
                <li>C/C++/C#</li>
            </dl>
        </div>
        <div id="Sub_Menu2" class="child_menu" onmouseover="this.style.display='block'" onmouseout="HideThis(this);" style="display:none;">
            <dl>
                <li>Java</li>
                <li>Java</li>
            </dl>
        </div>    
    </body>
    </html>