下拉菜单的实现

最新推荐文章于 2025-08-15 09:01:53 发布

原创最新推荐文章于 2025-08-15 09:01:53 发布 · 214 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #div #function #table #border #server

本文介绍了一种使用JavaScript和HTML实现的菜单栏悬停显示子菜单的效果。通过为不同的菜单项设置onmouseover和onmouseout事件，当鼠标悬停在菜单项上时，相应的子菜单会显示出来；当鼠标移开时，子菜单则隐藏。这种方式可以提高网站导航的用户体验。

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

function td1_onmouseover(){

div1.style.visibility="visible"

return;

}

function td1_onmouseout(){

div1.style.visibility="hidden"

return;

}

function div1_onmouseover(){

div1.style.visibility="visible"

return;

}

function div1_onmouseout(){

div1.style.visibility="hidden"

return;

}

function td2_onmouseover(){

div2.style.visibility="visible"

return;

}

function td2_onmouseout(){

div1.style.visibility="hidden"

return;

}

function div2_onmouseover(){

div2.style.visibility="visible"

return;

}

function div2_onmouseout(){

div2.style.visibility="hidden"

return;

}

function td3_onmouseover(){

div3.style.visibility="visible"

return;

}

function td3_onmouseout(){

div3.style.visibility="hidden"

return;

}

function div3_onmouseover(){

div3.style.visibility="visible"

return;

}

function div3_onmouseout(){

div3.style.visibility="hidden"

return;

}

function td4_onmouseover(){

div3.style.visibility="visible"

return;

}

function td4_onmouseout(){

div3.style.visibility="hidden"

return;}

function div4_onmouseover(){

div3.style.visibility="visible"

return;}

function div4_onmouseout(){

div3.style.visibility="hidden"

return;

}

</script>

</HEAD>

<TABLE id="Table1" style="WIDTH: 779px; HEIGHT: 706px" cellSpacing="1" cellPadding="1"

width="779">

<TR>

<TABLE style="Z-INDEX: 102; LEFT: 0px; WIDTH: 776px; POSITION: absolute; TOP: 136px; HEIGHT: 27px"

borderColor="#ffccf0" cellSpacing="1" cellPadding="1" width="776" align="center" bgColor="#66ff66"

border="1">

<TR>

<TD language="javascript" id="td1" onmouseover="td1_onmouseover()" onmouseout="td1_onmouseout()"

align="center"><FONT face="宋体">社員管理</FONT></TD>

<TD language="javascript" id="td2" onmouseover="td2_onmouseover()" onmouseout="td2_onmouseout()"

align="center"><FONT face="宋体">カレンダー</FONT></TD>

<TD language="javascript" id="td3" onmouseover="td3_onmouseover()" onmouseout="td3_onmouseout()"

align="center"><FONT face="宋体">勤怠情報</FONT></TD>

<TD language="javascript" id="td4" onmouseover="td4_onmouseover()" onmouseout="td4_onmouseout()"

align="center"><FONT face="宋体">汎用マスター</FONT></TD>

</TR>

</TABLE>

<DIV language="javascript" id="div1" onmouseover="return div1_onmouseover()" style="Z-INDEX: 106; LEFT: 48px; VISIBILITY: hidden; WIDTH: 72px; POSITION: absolute; TOP: 160px; HEIGHT: 75px; BACKGROUND-COLOR: #ccccff"

onmouseout="return td1_onmouseout()" ms_positioning="GridLayout">

<TABLE id="Table2" style="Z-INDEX: 101; LEFT: 0px; WIDTH: 72px; POSITION: absolute; TOP: 0px; HEIGHT: 75px"

cellSpacing="0" cellPadding="0" width="72" align="center" bgColor="#ccccff" border="0">

<TR>

<TD onmouseover="this.style. backgroundColor='#6666ff'" style="HEIGHT: 24px" onmouseout="this.style. backgroundColor='#ccccff'"

align="center" rowSpan="1"><FONT face="宋体" size="2"><A href="#">最新</A></FONT></TD>

</TR>

<TR>

</TR>

<TR>

</TR>

</TABLE>

</DIV>

<DIV language="javascript" id="div2" onmouseover="return div2_onmouseover()" style="Z-INDEX: 107; LEFT: 264px; VISIBILITY: hidden; WIDTH: 72px; POSITION: absolute; TOP: 168px; HEIGHT: 158px; BACKGROUND-COLOR: #ccccff"

onmouseout="return div2_onmouseout()" ms_positioning="GriLayout">

<TABLE style="Z-INDEX: 101; LEFT: 0px; WIDTH: 72px; POSITION: absolute; TOP: 0px; HEIGHT: 158px"

cellSpacing="1" cellPadding="1" width="72" bgColor="#ccccff" border="0">

<TR>

<TD onmouseover="this.style. backgroundColor='#6666ff'" style="HEIGHT: 25px" onmouseout="this.style. backgroundColor='#ccccff'"

align="center"><FONT face="宋体" size="2"><A href="#">日本</A></FONT></TD>

</TR>

<TR>

<TD onmouseover="this.style. backgroundColor='#6666ff'" style="HEIGHT: 25px" onmouseout="this.style. backgroundColor='#ccccff'"

align="center"><FONT face="宋体" size="2"><A href="#">大連</A></FONT></TD>

</TR>

</TABLE>

</DIV>

<DIV language="javascript" id="div3" onmouseover="return div3_onmouseover()" style="Z-INDEX: 108; LEFT: 648px; VISIBILITY: hidden; WIDTH: 72px; POSITION: absolute; TOP: 176px; HEIGHT: 92px"

onmouseout="return div3_onmouseout()" ms_positioning="GridLayout"><FONT face="MS UI Gothic"></FONT>

<TABLE id="Table3" style="Z-INDEX: 108; LEFT: 464px; WIDTH: 72px; POSITION: absolute; TOP: 176px; HEIGHT: 92px"

height="11" cellPadding="1" width="72" align="center" bgColor="#ccccff" border="0">

<TR>

<TD onmouseover="this.style. backgroundColor='#6666ff'" onmouseout="this.style. backgroundColor='#ccccff'"

align="center"><FONT face="宋体" size="2"><A href="#">振替</A></FONT></TD>

</TR>

<TR>

<TD onmouseover="this.style. backgroundColor='#6666ff'" onmouseout="this.style. backgroundColor='#ccccff'"

align="center"><FONT face="宋体" size="2"><A href="#">欠勤</A></FONT></TD>

</TR>

<TR>

<TD onmouseover="this.style. backgroundColor='#6666ff'" onmouseout="this.style. backgroundColor='#ccccff'"

align="center"><FONT face="宋体" size="2"><A href="#">遅刻</A></FONT></TD>

</TR>

</TABLE>

</DIV>

<DIV language="javascript" id="div4" onmouseover="return div4_onmouseover()" style="Z-INDEX: 108; LEFT: 648px; VISIBILITY: hidden; WIDTH: 72px; POSITION: absolute; TOP: 176px; HEIGHT: 92px"

onmouseout="return div4_onmouseout()" ms_positioning="GridLayout">

<TABLE id="Table4" style="Z-INDEX: 108; LEFT: 640px; WIDTH: 72px; POSITION: absolute; TOP: 168px; HEIGHT: 92px"

cellPadding="1" width="72" align="center" bgColor="#ccccff" border="0" HEIGHT="10">

<TR>

<TD onmouseover="this.style. backgroundColor='#6666ff'" onmouseout="this.style. backgroundColor='#ccccff'"