Question

我有一个导航栏，位于黑色div下面，导航栏中的下拉元素会在其中删除。这不是黑色div的主要功能。它只是为了设计，但它的效果非常好。你可以在这里看到我在说什么：http://www.ecoloc.ro/interior/test/regeneration。现在，我想要做的是，每当导航栏中的主要元素悬停时，就会出现一个足以覆盖主要元素的图像以及它下面的黑色div的一部分。您可以在我发布的链接中看到我想要图像的黑色间隙。可以这样做吗？

谢谢！

Answer 1

您可以更改<a>内<li>的尺寸，并为其设置背景图片。如果您不想显示主菜单字，只需在'：hover'（图像替换技术）上设置`text-indent：-9999px'。

在hout上设置修改并在hout上恢复正常的最佳方法是使用样式创建不同的类。因此，您可以在悬停时通过JavaScript更改类，自动更改尺寸。

Answer 2

由于您已经在＆＃34;子菜单中使用绝对定位＆＃34;列表，您应该可以使用一点CSS。

为包含所需图片的列表元素提供background-image:，设置background-repeat: no-repeat，设置绝对值height:并将列表重新定位到正确的top:， left:角落。使用margin:和padding:将列表元素放入正确的位置。

- 更新： -

尝试以下快速而肮脏的第一个草图，看看我是否有这个想法：

<ul id="media" style="position: absolute; top: 108px; left: 1018px; height: 35px; background-color: red; padding-left: 131px; padding-top: 35px; ">
        <li><a href="#" title="" data-description="starts here">presa</a></li>
        <li><a href="#" title="" data-description="starts here">video</a></li>
        <li><a href="#" title="" data-description="starts here">foto</a></li>
</ul>

子菜单包含主菜单条目和黑色子菜单栏。提供一个完全覆盖您想要的区域的图像并微调定位。

HTML / CSS - 导航栏中li元素内的图像

2 个答案: