📄 15-31.htm
字号:
<html><head><title>下拉菜单演示</title>
<style type="text/css">
a { font-family: 黑体, 宋体;
color: darkblue;
font-weight: bold;
margin-left: 4px; } /*主菜单链接样式*/
#menu, .menu { font-family: 宋体;
font-size:10pt;
color:black; }
/* 下拉菜单链接样式 */
#menu1 { position:absolute;
top:40px;
border-style:solid;
border-width:1px;
padding: 5px;
background-color:yellow;
width:75px;
color: black;
font-size: 12pt;
visibility:hidden; }
#menu2 { position:absolute;
top:40px;
left:3.2cm;
border-style:solid;
border-width:1px;
padding: 5px;
background-color:orange;
width:80px;
color: black;
font-size: 12pt;
visibility:hidden; }
#menu3 { position:absolute;
top:40px;
left:6.2cm;
border-style:solid;
border-width:1px;
padding: 5px;
background-color:pink;
width:80px;
color: black;
font-size: 12pt;
visibility:hidden; }
</style>
<script language="JavaScript">
function showMenu(id){
var ref = document.getElementById(id);
ref.style.visibility = "visible"; // 显示下拉菜单
}
function hideMenu(id){
var ref = document.getElementById(id);
ref.style.visibility = "hidden"; // 隐藏下拉菜单
}
</script>
<body bgColor="lightblue">
<table width="350" border="2" bgcolor="lightgreen" cellspacing="1"
cellpadding="2">
<tr>
<td width="100">
<div id="menu1" onDblClick="hideMenu('menu1');">
<a class="menu" href="#">国内新闻</a><br>
<a class="menu" href="#">国际新闻</a><br>
<a class="menu" href="#">本市新闻 </a><br>
</div>
<a href="#" onClick="showMenu('menu1');" >新闻</a>
</td>
<td width="100">
<div id="menu2" onDblClick="hideMenu('menu2');">
<a class="menu" href="#">乒乓球</a><br>
<a class="menu" href="#">篮 球</a><br>
<a class="menu" href="#>">足 球</a><br>
</div>
<a href="#" onClick="showMenu('menu2');">体育</a>
</td>
<td width="100">
<div id="menu3" onDblClick="hideMenu('menu3');">
<a class="menu" href="#">电影</a><br>
<a class="menu" href="#">话剧</a><br>
<a class="menu" href="#>">流行音乐</a><br>
</div>
<a href="#" onClick="showMenu('menu3');">娱乐</a>
</td>
</tr></table>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -