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

Question

我试图在一个小的45px x 45px图像上悬停一个全长（宽度：100％）淡入菜单？ 我曾尝试过不同的方法，一旦我悬停但没有运气，就可以将菜单设置为100％宽度。下面的代码在步骤方面对我来说似乎最有意义，但它仍然不起作用。任何帮助将不胜感激。

谢谢你， 埃德温

＆＃13;

＆＃13;

.nav {
	position: relative;
	display: block;
	text-align: center;
	width: 45px;
}

.menu {
	display: none;
	position: absolute;
	background-color: #aaaaaa;
	background: rgb(204, 204, 204);
	background: rgba(204, 204, 204, 0.1);
	width: 100%;
	height: 75px;
	transition-delay: 5s;
}

.nav:hover .menu {
	display: block;
	animation: fadein 2s;
}

@keyframes fadein {
	from {opacity: 0;}
	to   {opacity: 3;}
}

li {
	text-decoration: none;
	list-style: none;
	display: inline-block;
	margin-right: 75px;
	margin-top: 25px;
	font-size: 1.5em;
	color: #ffffff;
	text-shadow: 1px 1px #3fddff;
	font-weight: bolder;
}

＆＃13;

<nav class="nav">
		<img src="down-arrow.png" height="45px" width="45px" alt="Down Arrow" class="down">
			<ul class="menu">
				<a href="#"><li>Example1</li></a>
				<a href="#"><li>Example2</li></a>
				<a href="#"><li>Example3</li></a>
			</ul>
	</nav>	

＆＃13;

＆＃13;

＆＃13;

Answer 1

菜单中的HTML错误。 li应该是ul的直接后代。从导航absolute中移除.menu定位可以占用页面空间，以便当您在图像和菜单之间鼠标移动时.nav:hover .menu将继续显示.menu 。同时从.nav移除了宽度，以便.menu链接可以扩展页面的宽度。

.nav {
	position: relative;
	display: block;
}

.menu {
	display: none;
	background-color: #aaaaaa;
	background: rgb(204, 204, 204);
	background: rgba(204, 204, 204, 0.1);
	width: 100%;
	height: 75px;
	transition-delay: 5s;
    text-align: center;
}

.nav:hover .menu {
	display: block;
	animation: fadein 2s;
}

@keyframes fadein {
	from {opacity: 0;}
	to   {opacity: 3;}
}

li {
	text-decoration: none;
	list-style: none;
	display: inline-block;
	margin-right: 75px;
	margin-top: 25px;
	font-size: 1.5em;
	color: #ffffff;
	text-shadow: 1px 1px #3fddff;
	font-weight: bolder;
}

<nav class="nav">
		<img src="down-arrow.png" height="45px" width="45px" alt="Down Arrow" class="down">
			<ul class="menu">
				<li><a href="#">Example1</a></li>
				<li><a href="#">Example1</a></li>
				<li><a href="#">Example1</a></li>
			</ul>
	</nav>	

Answer 2

当你说＆＃34;宽度：100％＆＃34;你的意思是整个视口，还是只是容器元素的整个宽度？