I wanted to make a full screen navigation menu overlay with background changing as you hover over each link. But it seems that images appear on the same level with the list links, leaving the space above blank. Any ideas how to fix this?
this is the code:
<ul>
<li class=" animated fadeInDown delay-002 "><a href="story.html" title="Story">BLABLA</a><img src="uploads/images/header/_header/12_photo_3.jpg" alt=""></li>
<li class=" animated fadeInDown delay-003"><a href="services.html" title="Services">Services</a><img src="uploads/images/header/_header/5659081.jpg" alt=""></li>
<li class=" animated fadeInDown delay-004"><a href="news.html" title="News">News</a></li>
<li class=" animated fadeInDown delay-005"><a href="contact.html" title="Contact">Contact</a></li>
</ul>
.nav-overlay img{
position: absolute;
opacity:0;
z-index: -60;}
.nav-overlay ul li img{
position: absolute;
top:0;
left:0;
z-index: -50;}
.nav-overlay li a:hover + img { opacity: 1;}