H5下拉菜单无法出现

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;
}