js的高手进来看看。

鼠标移过去时菜单就出来
==============
onmouseover()
移开就缩到里面
===========
onmouseout()
移过去后鼠标点击能拖动这个菜单到任何地方
==============
onclick()
onmousemove()

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

大家也只能提供个思路：首先要用到 2楼说的一些事件再有在事件里面去写：无非就是 style.display 这些
<style type="text/css">

</style>
<script type=text/javascript><![CDATA[//><!]]></script>
</head>
<ul id="nav">
<li><a href="#">产品介绍</a>
<ul>
<li><a href="#">四季情缘</a></li>
<li><a href="#">四季情缘</a></li>
<li><a href="#">四季情缘</a></li>
<li><a href="#">四季情缘</a></li>
<li><a href="#">四季情缘</a></li>
<li><a href="#">四季情缘</a></li>
</ul>
</li>
<li><a href="#">服务介绍</a>
<ul>
<li><a href="#">四季情缘工作室</a></li>
<li><a href="#">四季情缘工作室</a></li>
<li><a href="#">服务二</a></li>
<li><a href="#">服务二服务二</a></li>
<li><a href="#">四季情缘工作室</a></li> <li><a href="#">服务二</a></li>
</ul>
</li>
<li><a href="#">成功案例</a>
<ul>
<li><a href="#">案例三</a></li>
<li><a href="#">案例</a></li>
<li><a href="#">案例三案例三</a></li>
<li><a href="#">案例三案例三案例三</a></li>
</ul>
</li>
<li><a href="#">关于我们</a>
<ul>
<li><a href="#">我们四</a></li>
<li><a href="#">我们四</a></li>
<li><a href="#">我们四</a></li>
<li><a href="#">我们四111</a></li>
</ul>
</li> <li><a href="#">在线演示</a>
<ul>
<li><a href="#">演示</a></li>
<li><a href="#">演示</a></li>
<li><a href="#">演示</a></li>
<li><a href="#">演示演示演示</a></li>
<li><a href="#">演示演示演示</a></li>
<li><a href="#">演示演示</a></li>
<li><a href="#">演示演示演示</a></li>
<li><a href="#">演示演示演示演示演示</a></li>
</ul>
</li>
<li><a href="#">联系我们</a>
<ul>
<li><a href="#">联系联系联系联系联系</a></li>
<li><a href="#">联系联系联系</a></li>
<li><a href="#">联系</a></li>
<li><a href="#">联系联系</a></li>
<li><a href="#">联系联系</a></li>
<li><a href="#">联系联系联系</a></li>
<li><a href="#">联系联系联系</a></li>
</ul>
</li>
</ul>
</body>
IE6.0和FF2.0测试通过
<html>
<head>
<title>菜单收缩移动</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312"/>
<style type="text/css">
.DragCss{cursor:move}
.NormalCss{cursor:default}
body{font-size:10pt}
td{font-size:10pt}
</style>
</head>
<body>
<script type="text/javascript">
var OldX,OldY,tbWidth,tbHeight;
var ox,oy,ex,ey,IsDrag=false,DragObj=null;//移动时需要的变量
window.onload=InitMenu;
document.onmouseup=MouseUp;
document.onmousemove=MouseMove;
document.onmousedown=MouseDown;
function InitMenu()
{
   var Menu=document.getElementById("Menu");
   tbWidth=parseInt(Menu.offsetWidth);
   tbHeigth=parseInt(Menu.offsetHeigth);
   OldY=0;
   OldX=-(tbWidth-20);
   Menu.style.top=OldY+"px";
   Menu.style.left=OldX+"px";
   Menu.onmouseover=MouseOver;
   Menu.onmouseout=MouseOut;
}
function MouseOver()
{
    var Menu=document.getElementById("Menu");
    if(parseInt(Menu.style.top)==0)
    {
      Menu.style.left="0px";
    }
}
function MouseOut()
{
    var Menu=document.getElementById("Menu");
    if(parseInt(Menu.style.top)==0)
    {
      Menu.style.left=OldX+"px";
    }
}
function MouseMove(e)
{
  if(IsDrag)
  {
    hadMove=true;
    e=e?e:event;
    DragObj.style.left=ox+parseInt(e.clientX-ex)+"px";
    DragObj.style.top=oy+parseInt(e.clientY-ey)+"px";
  }
}
function MouseDown(e)
{
  e=e?e:event;
  var tag=e.target?e.target:e.srcElement;
  while(tag!=null)
  {
    if(tag.className=="NormalCss")
    {
       DragObj=tag;
       DragObj.className="DragCss";
       IsDrag=true;
       ox=parseInt(DragObj.style.left);
       oy=parseInt(DragObj.style.top);
       ex=parseInt(e.clientX);
       ey=parseInt(e.clientY);
       break;
    }
    else
     tag=tag.parentNode;
  }
}
function MouseUp()
{
  var Menu=document.getElementById("Menu");
  DragObj=null;
  IsDrag=false;
  Menu.className="NormalCss";
}
function ResetPos()
{
  var Menu=document.getElementById("Menu");
  Menu.style.top=OldY+"px";
  Menu.style.left=OldX+"px";
}
</script>
<table border='1' id='Menu' class="NormalCss" cellspacing='2' cellpadding='0' style="position:absolute;top:0px;left:0px">
<tr><td align='right'><a href='#' onclick="ResetPos()">还原</a></td>
<td rowspan="6" valign="middle" style="width:10px">测试菜单</td>
</tr>
<tr><td>测试菜单1</td></tr>
<tr><td>测试菜单2</td></tr>
<tr><td>测试菜单3</td></tr>
<tr><td>测试菜单4</td></tr>
<tr><td>测试菜单5</td></tr>
</table>
</body>
</html>