TlceGal 2022-05-27 21:16 采纳率: 100%
浏览 44
已结题

H5下拉菜单无法出现

H5下拉菜单无法出现
将鼠标移到“产品”上时,控制“产品”字体变色的hover可以实现,但是控制下拉菜单出现的hover却没有生效(浏览器是chrome,软件是Hbuilderx),刚学H5没几天,室友也看不出来,请求各位指点

img


<!-- 主体部分 -->
<!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;
}

```

  • 写回答

2条回答 默认 最新

      报告相同问题?

      相关推荐 更多相似问题

      问题事件

      • 系统已结题 6月4日
      • 已采纳回答 5月27日
      • 创建了问题 5月27日

      悬赏问题

      • ¥15 工具变量 时间序列相关问题
      • ¥15 正弦波的峰值查找算法
      • ¥15 关于lwip的pbuf数据提取问题
      • ¥50 请求关于BBS数据集的资源分享
      • ¥15 设计一份接口自动化测试报告
      • ¥15 手机安装kali后ifconfig 提示错误
      • ¥15 用C++求矩阵的特征值
      • ¥30 求解答(自动忽略本括号内容)
      • ¥15 Javaweb的增删改查
      • ¥30 用eclipse和sqlserver做