帮忙改一个下拉导航.泪谢

http://www.szkehu.com/dropdown.htmlJS和css代码都在这个网页里面.现在要改的效果就是 鼠标放上去,出来一排下拉菜单, 然后鼠标移到每一个下拉菜单的时候,再右边出来一个子菜单,显示一张图片...网页上我做了效果说明. 泪谢！！

解决方案 »

  1.   

    思路是：层用absolute定位，每次点击都计算当前点击对象的右下角坐标，之后显示
      

  2.   

    思路是：层用absolute定位，每次点击都计算当前点击对象的右下角坐标，之后显示
      

  3.   

    <!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>
        <title>Untitled Page</title>
        <style type="text/css">
            #menus li
            {
             list-style:none;
            }
            #menus
            {
             float:left;
            }
            /*要设置层的大小*/
            #images
            {
             display:none;
            }
        </style>
        <script language="javascript" type="text/javascript">
            var index = 1;
            function hov(i) {
                document.getElementById("img" + index).style.display = "none";
                document.getElementById("img" + i).style.display = "block";
                index = i;
            }
        </script>
    </head>
    <body>
        <div id="menus">
          <ul>
             <li id="li1">111</li>
             <li id="li2">222</li>
             <li id="li3">333</li>
             <li id="li4">444</li>
          </ul>
        </div>
        <div id="images">
            <ul>
                <li id="img1"><img src="图片" /></li>
                <li id="img2"><img src="图片" /></li>
                <li id="img3"><img src="图片" /></li>
                <li id="img4"><img src="图片" /></li>
            </ul>
        </div>
    </body>
    </html>