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

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条回答 默认 最新

  • 你好!机器人 2022-05-27 21:23
    关注

    hover 只能控制同级,你这种布局只能用js

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

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

悬赏问题

  • ¥15 delta降尺度计算的一些细节,有偿
  • ¥15 Arduino红外遥控代码有问题
  • ¥15 数值计算离散正交多项式
  • ¥30 数值计算均差系数编程
  • ¥15 redis-full-check比较 两个集群的数据出错
  • ¥15 Matlab编程问题
  • ¥15 训练的多模态特征融合模型准确度很低怎么办
  • ¥15 kylin启动报错log4j类冲突
  • ¥15 超声波模块测距控制点灯,灯的闪烁很不稳定,经过调试发现测的距离偏大
  • ¥15 import arcpy出现importing _arcgisscripting 找不到相关程序