Question

我是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/

的小提琴

Answer 1

您需要通过定位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>

在图像上显示li内容

1 个答案: