div+style+js实现下拉菜单

原创于 2008-12-13 14:28:00 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#div #function #border #table

javascript 专栏收录该内容

48 篇文章

订阅专栏

本文展示了一个使用HTML和JavaScript实现的鼠标悬停效果示例。当鼠标悬停在一个链接上时，会显示一个包含两个链接的下拉菜单。该示例通过修改元素的可见性来实现下拉菜单的显示与隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<body>
  <script>
     function showDiv(){
      var msgDiv =document.getElementById("msgMenuDiv");
     msgDiv.style.visibility = "visible";
    }
     function hiddenDiv(obj){
      var msgDiv =document.getElementById("msgMenuDiv");
      msgDiv.style.visibility = "hidden";
    }
     </script>
     <table width="50%">
       <tr>
        <td>A</td>
        <td>b</td>
        <td>c</td>
        <td>
         <div style="position:relative; " name="divparent" >
         <A href="#" onMouseOver="showDiv();">parent title</A>
           <div style="height:200px; width:150px; position:absolute; margin-left:-95px; left: 97px; visibility: hidden; border: 1px none #000000; overflow: hidden;" id="msgMenuDiv" name="msgMenuDiv" onMouseOut="hiddenDiv(this);" onMouseOver="showDiv();">
                      <br/>
                      <a href="#" target="_top">link1</a><br/>

                 <a href="#" target="_top">link2</a><br/>
           </div>
         </div>
     </td>
     </tr>
    </table>
</body>
</html>