html - 在图像上显示 li 内容

Question

我是 CSS 的新手，我有一个带有菜单列表的标题和一个位于标题下方的图像。

当我将鼠标悬停在菜单栏中的图库上时，它会将下面的图像替换为悬停 block 的高度。有什么方法可以使内容重叠在图像上而不是替换它。

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

这是我的代码的 fiddle ，https://jsfiddle.net/khushboo_sangal/5xLs5odu/

Answer 1

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

.nav li {
  position: relative;
}

.nav li ul {
  position: absolute;
}

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

您还有一些未关闭的 <span />嵌套 ul 中的标签。感谢@vals 指出这一点:

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