html - 在图片上显示内容

我是CSS的新手，我有一个带有菜单列表的标题，并且在标题下方有一个图像。

当我将鼠标悬停在菜单栏中的图库上时，它会将下面的图像按悬停的块的高度移动。是否有任何方法可以使内容重叠在图像上而不是移动图像。

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

这是我的代码https://jsfiddle.net/khushboo_sangal/5xLs5odu/的小提琴

最佳答案

您需要通过将其定位为absolute从文档流中删除下拉菜单。只要确保将其父位置设置为relative。

.nav li {
  position: relative;
}

.nav li ul {
  position: absolute;
}

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

您的嵌套ul中也有一些未封闭的<span />标记。感谢@vals指出这一点：

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