<!--program Ch02_11_menu.html-->
<title> drop-down menu instances </title>
<script language= "JavaScript" >
Displays the corresponding div when the mouse moves to the menu option
Function Show (menu)
{document.getElementById (menu). style.visibility= "Visible";}
Hide All div When mouse is moved out
function Hide () {
document.getElementById (menu1). style.visibility= "hidden";
document.getElementById (MENU2). style.visibility= "hidden";
document.getElementById (MENU3). style.visibility= "hidden";
}
</script>
<body>
<table>
<tr bgcolor= "#9999FF" align= "Center" >
<TD width= "onmousemove=" Show (' menu1 ') "onmouseout=" Hide () "> Series Courses </td>
<TD width= "onmousemove=" Show (' menu2 ') "onmouseout=" Hide () "> Teaching Courseware </td>
<TD width= "onmousemove=" Show (' Menu3 ') "onmouseout=" Hide () "> Course Outline </td>
</tr>
</table>
<div id= "menu1" onmousemove= "Show (' menu1 ')" onmouseout= "Hide ()"
style= "background: #9999FF;p osition:absolute;left:12;top:38;width:120;
Visibility:hidden ">
<span>c++ Programming </span><br>
<span>java Programming </span><br>
<span>c# Programming </span><br>
</div>
<div id= "Menu2" onmousemove= "Show (' menu2 ')" onmouseout= "Hide ()"
style= "background: #9999FF;p osition:absolute;left:137;top:38;width:120;
Visibility:hidden ">
<span>c++ Courseware </span><br>
<span>java Courseware </span><br>
<span>c# Courseware </span><br>
</div>
<div id= "Menu3" onmousemove= "Show (' Menu3 ')" onmouseout= "Hide ()"
style= "background: #9999FF;p osition:absolute;left:260;top:38;width:120;
Visibility:hidden ">
<span>c++ Outline </span><br>
<span>java Outline </span><br>
<span>c# Outline </span><br>
</div>
</body>
Use JAVASCRIPT+DIV+CSS to implement the drop-down menu. Displays the corresponding div:function Show (menu) when the mouse moves to the menu option. Hides all div:function hide () when the mouse is moved out.