【问题标题】:Nivo slider css drop down menu conflictNivo滑块css下拉菜单冲突
【发布时间】:2012-07-31 00:36:33
【问题描述】:

我正在一个网站上工作,我正在尝试向其中添加 nivo 滑块。我遇到的问题是滑块覆盖了 CSS 下拉菜单,我在菜单中看不到方向箭头。

当我将 z-index:-50 添加到 nivo-slider.css 文件中的 .nivoSlider 行时,菜单没有隐藏在滑块后面,但我仍然没有导航箭头,并且现在实际滑块(​​左或右)中的导航箭头可见但不起作用。

查看这些问题的链接是here

我们将不胜感激任何建议的帮助。 谢谢,乔

【问题讨论】:

  • 我刚刚浏览了您的网站。而不是更改滑块的 z-index 更改 .dropmenu li ul li a 的 zindex。我试过了,对我来说效果很好。

标签: css menu slider nivo-slider


【解决方案1】:

好的,首先从.nivoSlider 中删除 z-index。第二个也是最重要的部分 - 你在菜单中有这样的结构:

<ul id="nav-one" class="dropmenu css-only">
<li><a style="border-left:1px solid #CCCCCC; padding-left:23px; padding-right:23px;" href="index.php">Home</a></li>

<li><a href="company.php">Company</a>
    <ul class="SomeNewClass">
    <li><a href="history.php">History</a></li>
    <li><a href="markets.php">Markets</a></li>
    <li><a href="news.php">News</a></li>
    <li><a href="licensee-advisory-board.php">Licensee Advisory Board</a></li>
    <li><a href="copyright-notice.php">Copyright Notice</a></li>
    </ul>
    </li>
<li><a href="branding.php">Branding</a>
    <ul class="SomeNewClass">
    <li><a href="graphics.php">Graphics</a></li>
    <li><a href="signs.php">Signs</a></li>
    <li><a href="paint.php">Paint</a></li>
    <li><a href="dispenser-doorSkins.php">Dispenser DoorSkins</a></li>
    <li><a href="dispenser-overlays.php">Dispenser Overlays</a></li>
    <li><a href="image-manual.php">Image Manual</a></li>
    <li><a href="image-evaluation-form.php">Image Evaluation Form</a></li>
    </ul>
</li>
<li><a href="payments-processing.php">Payments Processing</a>
    <ul class="SomeNewClass">
    <li><a href="fleet-card.php">Fleet Card</a></li>
    <li><a href="echoSat.php">EchoSat</a></li>
    <li><a href="PCI-compliance.php">PCI Compliance</a></li>
    <li><a href="transnational.php">TransNational</a></li>
    </ul>
</li>
....
....
....

如您所见,我添加了名为.SomeNewClass 的类。把这个类放在我在例子中展示给你的所有位置,然后把它放到你的 CSS 中

.SomeNewClass
{
    z-index: 99999;
}

【讨论】:

  • 没看懂,能不能举个例子。
  • 在菜单中有箭头的页面中,菜单的结构是这样的
  • **一些链接文本**。因此,具有 Nivo 滑块的页面根本没有那个 。你忘了添加那行代码。
  • 我很高兴帮助别人,因为别人帮助了我;)在谷歌浏览器中使用检查元素选项(右键单击要检查的任何元素),它确实是一个不可或缺的工具工作。祝你好运;)
  • 猜你喜欢
    相关资源
    最近更新 更多
    热门标签