0

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

enter image description here

2

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.