请高手帮忙看下我的代码，使其成为当鼠标移到选项上时不要自动显示下拉菜单，只有当点击时才显示。
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
</head>
<style type="text/css">
.droplist {
color:black;
padding: 5px;
font-size: 16px;
border:none;
cursor: pointer;
}
.dropdown1 {
position:relative;
display: inline-block;
}
.dropdown2 {
position:relative;
display: inline-block;
}
/*一级下拉菜单*/
.dropdown-content1 {
display: none;
position:absolute;
background-color: #f9f9f9;
min-width: 160px; /*更改一级下拉菜单的宽度*/
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
/*二级下拉菜单*/
.dropdown-content2 {
display: none;
position:absolute;
background-color: #f9f9f9;
min-width: 160px; /*更改二级下拉菜单的宽度*/
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
/*设置下拉列表里内容*/
.dropdown-content1 a {
color: black;
/*padding: 12px 16px;*/
padding: 5px;
text-decoration: none;
display: block;
}
.dropdown-content2 a {
color: black;
/*padding: 12px 16px;*/
padding: 5px;
text-decoration: none;
display: block;
}
.dropdown1:hover{user-select: none;}
.dropdown1:hover .droplist {color:orangered;}
.dropdown1:hover .dropdown-content1 {display:block; position:absolute; z-index:1; left:30px; top:30px;}
.dropdown2:hover .droplist {color:orangered;}
.dropdown2:hover .dropdown-content2 {display:block; position:absolute; z-index:1; left:30px; top:30px;}
.dropdown-content1 a:hover {background-color:#f1f1f1; color:orangered}
.dropdown-content2 a:hover {background-color:#f1f1f1; color:orangered}
</style>
<body>
<table width="1200" border="0" align="center" cellspacing="20">
<tr>
<td>
<div class="dropdown1">
<div class="droplist">下拉菜单R1-1<img src="arrows.gif" width="8" height="8" alt=""></div>
<div class="dropdown-content1">
<a href="#">链接 1</a>
<div class="dropdown2">
<a href="#">链接 2<img src="arrows.gif" width="8" height="8" alt=""></a>
<div class="dropdown-content2">
<a href="www.baidu.com" target="_blank">百度</a>
<a href="www.google.com.sg" target="_blank">谷歌</a>
</div>
</div>
<a href="#">链接 3</a>
</div>
</div>
</td>
<td><div>下拉菜单R1-2</div></td>
<td><div>下拉菜单R1-3</div></td>
<td><div>下拉菜单R1-4</div></td>
</tr>
<tr>
<td>
<div class="dropdown1">
<div class="droplist">下拉菜单R2-1<img src="arrows.gif" width="8" height="8" alt=""></div>
<div class="dropdown-content1">
<a href="#">链接 1</a>
<a href="#">链接 2<img src="arrows.gif" width="8" height="8" alt=""></a>
<a href="#">链接 3</a>
</div>
</div>
</td>
<td><div>下拉菜单R2-2</div></td>
<td><div>下拉菜单R2-3</div></td>
<td><div>下拉菜单R2-4</div></td>
</tr>
</table>
</body>
</html>
CSS中好像没有设置鼠标点击事件的，只有阻止鼠标点击事件的 pointer-events: none;
设置点击事件用Javascript可很简单设置点击事件，用onclick
https://ask.csdn.net/questions/7430058?spm=1005.2025.3001.5141