Как я могу создать полную длину fade in menu из небольшого изображения 45x45px?

I am trying to have a full length (Width: 100%) fade In menu appear when one hovers over a small 45px x 45px image?
Я пробовал различные способы получения меню на 100% ширины, как только я наведу, но не повезло. Код ниже, кажется, имеет самый смысл для меня с точки зрения шагов, но он по-прежнему не работает. Любая помощь будет оценена по достоинству.

Спасибо!,
Эдвин

.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;
}
<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>	

2 ответа

  1. HTML в вашем меню был неправильным. liдолжен быть прямым потомком ul. Удаление absoluteпозиционирования из nav .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>	

  2. Когда вы говорите » ширина: 100%», вы имеете в виду весь видовой экран или только всю ширину элемента контейнера?