求悬浮菜单js代码

就像海尔集团首页那样的效果

解决方案 »

  1.   

    将你所要悬浮的所有菜单分别用一个隐藏的层来布局,然后当鼠标放到一个选项上,显示所要链接的层,让其它层隐藏
      

  2.   

    实现的方法很多，不知道楼主想要做什么样的。
    最简单的方法是：<span title="鼠标放上去显示的内容">内容</span>
    内容里面可以放很多东西，加入html以后就可以做的很漂亮了
    用javascript实现的话要用到onmouseover属性和样式
    <div onmouseover="javascript:show('要显示的内容');">内容<div>  function showDialog(content,theEvent)
      {
          var event = theEvent?theEvent:window.event;
          var main = document.getElementById("main");
          var dialog = document.createElement("div");
          dialog.id = "dialog";
          dialog.innerHTML = content;
          main.appendChild(dialog);
          dialog.className = "dialog";
          dialog.style.left = event.clientX - 20;
          dialog.style.top = event.clienty;
      }
      function clearDialog()
      {      
          var main = document.getElementById("main");
          var dialog = document.getElementById("dialog");
          if(dialog != null)
            main.removeChild(dialog);
      }
    样式：
    .dialog{position:absolute;left:0px;right:0px;z-index:101;background-color:#5d90dd;
    padding:5;text-align:center;width:50px;}
    html：<body id="main">
      <div>
        <div style="padding-top:200px;padding-left:300px;" onmouseover="javascript:showDialog('要显示的内容',event);" onmouseout="javascript:clearDialog();">文字内容</div>
      </div>
    </body>
      

  3.   

    自己解决了.............................