Html 如何从45x45px的小图像生成全长淡入菜单？

我试图有一个完整的长度（宽度：100%）淡入菜单出现时，一个小的45像素x 45像素的图像悬停？ 我曾经尝试过不同的方法，在鼠标悬停时让菜单100%宽度，但没有成功。下面的代码在步骤上对我来说似乎最有意义，但它仍然不起作用。任何帮助都将不胜感激

谢谢,， 埃德温

.nav{
位置：相对位置；
显示：块；
文本对齐：居中；
宽度：45px；
}
.菜单{
显示：无；
位置：绝对位置；
背景色：#AAAAA；
背景：rgb（204204204）；
背景：rgba（204204204,0.1）；
宽度：100%；
高度：75px；
过渡延迟：5s；
}
.nav：悬停菜单{
显示：块；
动画：Fadein2S；
}
@关键帧淡入淡出{
从{opacity:0；}
到{opacity:3；}
}
李{
文字装饰：无；
列表样式：无；
显示：内联块；
右边距：75px；
边缘顶部：25px；
字号：1.5em；
颜色：#ffffff；
文本阴影：1px 1px#3fddff；
字体大小：粗体；
}

菜单中的HTML错误

li

应该是

ul

的直系后裔。从nav

菜单中删除
绝对定位
允许它占用页面空间，以便在图像和菜单之间单击鼠标时，
导航：悬停。菜单
将继续显示
。菜单
。还从
.nav
中删除了宽度，以便
.menu
链接可以扩展页面宽度


.nav{
位置：相对位置；
显示：块；
}
.菜单{
显示：无；
背景色：#AAAAA；
背景：rgb（204204204）；
背景：rgba（204204204,0.1）；
宽度：100%；
高度：75px；
过渡延迟：5s；
文本对齐：居中；
}
.nav：悬停菜单{
显示：块；
动画：Fadein2S；
}
@关键帧淡入淡出{
从{opacity:0；}
到{opacity:3；}
}
李{
文字装饰：无；
列表样式：无；
显示：内联块；
右边距：75px；
边缘顶部：25px；
字号：1.5em；
颜色：#ffffff；
文本阴影：1px 1px#3fddff；
字体大小：粗体；
}






当您说“宽度：100%”时，是指整个视口，还是仅指容器元素的整个宽度？
是的。我的想法是，当我将鼠标悬停在图像上时，菜单将淡入。我遇到的问题是，如果我将鼠标放在与图像平行的任何区域上，菜单将淡入，并且我只希望当我将鼠标悬停在图像上时，菜单将淡入。请使用Michael Coker提供的以下代码，但将（宽度：45px；高度：45px；）添加到.nav元素中，它应该按照您希望的方式工作。您的导航一直延伸到整个页面，您已将鼠标悬停设置为导航元素而不是图像。您好，我根据Michael Coker编辑了下面的代码，但是现在当我将鼠标悬停在图像上时，菜单会淡入，在图像的实际宽度（宽度：45px）中，我希望它显示整个屏幕的宽度。再次感谢。是的！！！谢谢你，格里拉忍者！！这就是它。如果我没有更好地描述我需要什么，我深表歉意。