鼠标悬停的问题

我想实现两个功能
1）鼠标悬停在“东北”时鼠标下方弹出个框，框里面列出东北的子城市，现在子城市能显示，但框不知道怎么实现；
2）现在鼠标悬停在“东北”后，继续向右滑动，会把所能悬停到的大区下的子城市都显示出来，而我是向实现悬停在哪，显示哪的子城市，其他的隐藏起来。
有没有大神能帮个忙啊？？<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
function $(id)
{return document.getElementById(id);}
function doit(obj){if($(obj).style.display=="none"){
$(obj).style.display="block";}
else
{$(obj).style.display="none";}
}</script>
</head>  <body>
  <table>
  <tr>
  <td>
  <table><tr><td>
  <a href="#" onmouseover="doit('d1')">东北</a>
  <a href="#" onmouseover="doit('d2')">京津</a>
  <a href="#" onmouseover="doit('d3')">上海</a>
  <a href="#" onmouseover="doit('d4')">华中</a>
  <a href="#" onmouseover="doit('d5')">华南</a>
  <a href="#" onmouseover="doit('d6')">西北</a>
  <a href="#" onmouseover="doit('d7')">西南</a>
  </td></tr></table>
  <p>
<span id="d1" style="display:none" onmouseout="doit('d1')" >
<div >
  <table>
  <tr>
  <td>
  <a href="#">沈阳</a>、<a href="#">大连</a>、</a><a href="#">铁岭 </a>  
  </td>
  </tr>
  </table>
</div>
</span>
</p>
<p>
<span id="d2" style="display:none" onmouseout="doit('d2')">
<div >
  <table>
  <tr>
  <td>
  <a href="#">北京</a>、<a href="#">天津</a>、</a><a href="#">塘沽</a>  
  </td>
  </tr>
  </table>
</div>
</span>
</p><p>
<span id="d3" style="display:none" onmouseout="doit('d3')">
<div >
  <table>
  <tr>
  <td>
  <a href="#">上海</a>、<a href="#">宝山</a>、</a><a href="#">崇明</a>  
  </td>
  </tr>
  </table>
</div>
</span>
</p><p>
<span id="d4" style="display:none" onmouseout="doit('d4')">
<div >
  <table>
  <tr>
  <td>
  <a href="#">华中</a>、<a href="#">华中</a>、</a><a href="#">华中</a>  
  </td>
  </tr>
  </table>
</div>
</span>
</p><p>
<span id="d5" style="display:none" onmouseout="doit('d5')">
<div >
  <table>
  <tr>
  <td>
  <a href="#">华南</a>、<a href="#">华南</a>、</a><a href="#">华南</a>  
  </td>
  </tr>
  </table>
</div>
</span>
</p><p>
<span id="d6" style="display:none" onmouseout="doit('d6')">
<div >
  <table>
  <tr>
  <td>
  <a href="#">西北</a>、<a href="#">西北</a>、</a><a href="#">西北</a>  
  </td>
  </tr>
  </table>
</div>
</span>
</p><p>
<span id="d7" style="display:none" onmouseout="doit('d7')">
<div >
  <table>
  <tr>
  <td>
  <a href="#">西南</a>、<a href="#">西南</a>、</a><a href="#">西南</a>  
  </td>
  </tr>
  </table>
</div>
</span>
</p>  
  </td>
  
  </tr>
  </table>
  </body>
</html>
 
 
 

解决方案 »

  1.   

    居然是java的
    你自己研究下吧
    http://www.woaicss.com/works/demo/2011.10/2011102301.html
      

  2.   

    1、在onmouseover的时候先将所有的span隐藏掉function doit(obj){
    var spans = document.getElementsByTagName("span");
    for(var i = 0 ; i < spans.length ; i ++ ){
    spans[i].style.display="none";
    }
    if($(obj).style.display=="none"){
    $(obj).style.display="block";
    }else{
    $(obj).style.display="none";
    }}2、加css啊，随便写一个
    <style>
    .xxxx{
    border: 1px #900 solid;
    }
    </style>