Html 悬停内容未显示在下拉菜单中（网页设计）

我正在写网页，下拉菜单按钮不起作用。不显示可悬停的内容。谁能告诉我原因吗。非常感谢

这是密码

*{
框大小：边框框；
字体系列：Arial、Helvetica、无衬线字体；
}
h1.1标题{
文本对齐：居中；
颜色：#66F3ED；
}
身体{
保证金：0；
}
保险商实验室{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景色：#808080；
高度：70像素；
字号：18px；
}
李{
浮动：左；
高度：70像素；
}
李：最后一个孩子{
边框底部：无；
}
李阿{
显示：块；
颜色：#66f3ed；
文本对齐：居中；
填充：23px 60px；
文字装饰：无；
}
li a:悬停：未（.active）{
背景色：#111；
}
.主动{
背景色：#808080；
边框底部：5px实心#66f3ed；
}
/*创建三个相邻浮动的不相等列*/
.栏目{
浮动：左；
高度：800px；
}
/*左右列*/
.栏边{
宽度：6%；
背景色：#868686；
溢出：隐藏；
z指数：2；
}
/*中柱*/
.column.middle{
宽度：70%；
背景色：#777777；
z指数：1；
}
.column.right{
宽度：24%；
背景色：#9191；
}
/*清除列后的浮动*/
.罗：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
/*下拉菜单*/
.dropbtn{
背景色：透明；
颜色：#66F3ED；
填充：16px；
字体大小：16px；
边界：无；
}
.下拉列表{
显示：内联块；
z指数：10！重要；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f1f1；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
左：100%；
}
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
/*响应式布局-使三列堆叠在彼此的顶部，而不是相邻*/
@媒体屏幕和屏幕（最大宽度：600px）{
.column.side、.column.middle{
宽度：100%；
}
}

CSS网站布局









面罩检测

您的HTML和CSS中都有几个问题需要解决，因此菜单将正常工作

首先：该

应包含

内的按钮、图像和下拉内容

例如，更改：

        <div class="column side">
            <div class="dropdown">
                <button class="dropbtn"><img src="Menu/Menu-1.png" style="width: 100%" alt="Menu"></button>
            </div>
            
            <br /><br />
            <img src="menu.jpg" alt="Menu">
        </div>
        <div class="dropdown-content">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
        </div> 

Fourth:例如，在悬停时更改子菜单项的背景

    .dropdown-content a:hover {
      color: white;
      background-color: red;
    }

如果您做到以上四点，菜单将按预期运行

下面是问题的完整修改代码-只需按下面的

运行代码片段即可：
*{
框大小：边框框；
字体系列：Arial、Helvetica、无衬线字体；
}
h1.1标题{
文本对齐：居中；
颜色：#66F3ED；
}
身体{
保证金：0；
}
保险商实验室{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景色：#808080；
高度：70像素；
字号：18px；
}
李{
浮动：左；
高度：70像素；
}
李：最后一个孩子{
边框底部：无；
}
李阿{
显示：块；
颜色：#66f3ed；
文本对齐：居中；
填充：23px 60px；
文字装饰：无；
}
li a:悬停：未（.active）{
背景色：#111；
}
.主动{
背景色：#808080；
边框底部：5px实心#66f3ed；
}
/*创建三个相邻浮动的不相等列*/
.栏目{
浮动：左；
高度：800px；
}
/*左右列*/
.栏边{
宽度：6%；
背景色：#868686；
溢出：隐藏；
z指数：2；
}
/*中柱*/
.column.middle{
宽度：70%；
背景色：#777777；
z指数：1；
}
.column.right{
宽度：24%；
背景色：#9191；
}
/*清除列后的浮动*/
.罗：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
/*下拉菜单*/
.dropbtn{
背景色：透明；
颜色：#66F3ED；
填充：16px；
字体大小：16px；
边界：无；
}
.下拉列表{
显示：内联块；
z指数：10！重要；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f1f1；
最小宽度：160px；
盒子阴影：0px 8px 16px 0px rgba（0,0,0,0.2
    .dropdown:hover .dropdown-content{
      display: block;
    }

    .dropdown-content a:hover {
      color: white;
      background-color: red;
    }