H5下拉菜单无法出现
将鼠标移到“产品”上时，控制“产品”字体变色的hover可以实现，但是控制下拉菜单出现的hover却没有生效（浏览器是chrome，软件是Hbuilderx），刚学H5没几天，室友也看不出来，请求各位指点
<!-- 主体部分 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/aliyunc.css" type="text/css">
</head>
<body>
<div id="topdirect">
<ul>
<li>
<input type="image" src="https://img.alicdn.com/tfs/TB13DzOjXP7gK0jSZFjXXc5aXXa-212-48.png" alt="" id="ali">
</li>
<li>
<a id="a1" href="#">最新活动</a>
</li>
<li>
<a id="a2" href="#">产品</a>
</li>
<li>
<a id="a3" href="#">解决方案</a>
</li>
<li>
<a id="a4" href="#">云市场</a>
</li>
<li>
<a id="a5" href="#">合作伙伴</a>
</li>
<li>
<a id="a6" href="#">支持与服务</a>
</li>
<li>
<a id="a8" href="#">开发者</a>
</li>
<li>
<a id="a8" href="#">了解阿里云</a>
</li>
</ul>
</div>
<div id="drop">
<h1 style="margin-top: 0px;">HelloWorld</h1>
<!-- 隐藏的下拉菜单 -->
</div>
</body>
</html
```css
<!-- CSS部分 -->
#a8{
text-decoration: none;
color: black;
font-size: 14px;
}
#drop{
width: 100%;
height: 500px;
background-color: gainsboro;
display: none;
}
#a2:hover #drop{
display: block;
}
/* 通过hover来让 #drop的display从 none变为 block*/
#a1:hover{
color: #FF6A00;
}
#a2:hover{
color: #FF6A00;
}
#a3:hover{
color: #FF6A00;
}
#a4:hover{
color: #FF6A00;
}
#a5:hover{
color: #FF6A00;
}
#a6:hover{
color: #FF6A00;
}
#a7:hover{
color: #FF6A00;
}
#a8:hover{
color: #FF6A00;
}
```
