CODEWITHSUNDEEP
htmlcss
user3587856
user3587856

Reputation: 279

Display li content over image

I am new to CSS, I have a header with a menu list and an image just below the header.

When I hover on Gallery within menu bar, it displaces the image below by the height of hovered block.Is there any way to make the content overlap on the image rather than displacing it.

<header class="container">
    <h1>First <br/> Website</h1>
    <nav>
        <ul class="nav group">
            <li><a href="" title="">Home</a></li>
            <li><a href="" title="">Gallery</a>
            <ul>
                <li><a href="" title=""><span>Images</span></a></li>
                <li><a href="" title=""><span>Videos<span></a></li>
                <li><a href="" title=""><span>Animations<span></a></li>
            </ul>
            </li>

        </ul>
    </nav>
</header><!-- /header -->

<section class="container img" id="corousel">
    <img src="trolltunga.jpg" alt="Test Image">
</section>

<footer class="container">
    More to come...
</footer>

Here is a fiddle to my code, https://jsfiddle.net/khushboo_sangal/5xLs5odu/

Upvotes: 0

Views: 81

Answers (1)

Carl Edwards
Carl Edwards

Reputation: 14434

You need to take the dropdown menu out of the document flow by positioning it absolute. Just make sure to set it's parent's position to relative.

.nav li {
  position: relative;
}

.nav li ul {
  position: absolute;
}

https://jsfiddle.net/5xLs5odu/2/

You also had some unclosed <span /> tags in your nested ul. Thanks @vals for pointing this out:

<li><a href="" title=""><span>Videos</span></a></li>
<li><a href="" title=""><span>Animations</span></a></li>

Upvotes: 1

Related Questions