First look at the effect:
Code:
Copy Code code as follows:
<title>good test</title>
<script>
function Showsubmenu (submenu) {
document.getElementById (submenu). style.display = "inline";
}
function Hidesubmenu (submenu) {
document.getElementById (submenu). Style.display = "None";
}
</script>
<style>
. menu{
margin:1px 1px 1px 1px;
padding:3px 5px 3px 5px;
Background-color: #8080C0;
Color:white;
}
. submenu {
margin:1px 1px 1px 1px;
padding:3px 5px 3px 5px;
Background-color: #8080C0;
Color:white;
}
</style>
<body>
<div>
<table>
<tr>
<TD style= "vertical-align:top;" >
<span class= "Menu" id= "Menu1" onmousemove= "Showsubmenu (' SubMenu1 ')" onmouseout= "Hidesubmenu (' SubMenu1 ')" > Menu1</span>
<br/>
<div id= "SubMenu1" style= "Display:none" onmousemove= (' Showsubmenu ') "SubMenu1" onmouseout= (' SubMenu1 ') >
<span class= "submenu" >submenu1</span><br/>
<span class= "submenu" >submenu2</span><br/>
<span class= "submenu" >submenu3</span><br/>
<span class= "submenu" >SubMenu4</span>
</div>
</td>
<TD style= "vertical-align:top;" >
<span class= "Menu" id= "Menu2" onmousemove= "Showsubmenu (' SubMenu2 ')" onmouseout= "Hidesubmenu (' SubMenu2 ')" > Menu2</span>
<br/>
<div id= "SubMenu2" style= "Display:none" onmousemove= (' Showsubmenu ') "SubMenu2" onmouseout= (' SubMenu2 ') >
<span class= "submenu" >submenu1</span><br/>
<span class= "submenu" >submenu2</span><br/>
<span class= "submenu" >submenu3</span><br/>
<span class= "submenu" >SubMenu4</span>
</div>
</td>
<TD style= "vertical-align:top;" >
<span class= "Menu" id= "Menu3" onmousemove= "Showsubmenu (' SubMenu3 ')" onmouseout= "Hidesubmenu (' SubMenu3 ')" > Menu3</span>
<br/>
<div id= "SubMenu3" style= "Display:none" onmousemove= (' Showsubmenu ') "SubMenu3" onmouseout= (' SubMenu3 ') >
<span class= "submenu" >submenu1</span><br/>
<span class= "submenu" >submenu2</span><br/>
<span class= "submenu" >submenu3</span><br/>
<span class= "submenu" >SubMenu4</span>
</div>
</td>
<TD style= "vertical-align:top;" >
<span class= "Menu" id= "Menu4" onmousemove= "Showsubmenu (' SubMenu4 ')" onmouseout= "Hidesubmenu (' SubMenu4 ')" > Menu4</span>
<br/>
<div id= "SubMenu4" style= "Display:none" onmousemove= (' Showsubmenu ') "SubMenu4" onmouseout= (' SubMenu4 ') >
<span class= "submenu" >submenu1</span><br/>
<span class= "submenu" >submenu2</span><br/>
<span class= "submenu" >submenu3</span><br/>
<span class= "submenu" >SubMenu4</span>
</div>
</td>
</tr>
</table>
</div>
</body>