z-index 不适用于 css3 下拉导航
我正在修改我在教程中找到的 css3 导航,但我在 z 索引方面遇到了问题。
请查看此处的导航:
http://cafemeetup.com/testArea/nav/
无论是 2 个导航项,您都可以看到下拉框的 z 索引高于生成它的链接。 这是不正确的,因为我已将翻转框的 z 索引设置为在堆叠顺序中较低。
我想要实现的目标是让下拉框落在链接下方,这样下拉框的阴影在顶部不可见。我希望链接和下拉框融为一体,我认为通过将链接放在下拉框的顶部,我可以实现这一目标。
这是在 Shopify 完成的:
http://www.shopify.com/ (滚动“资源”)
无论如何,希望有人能阐明这一点。 我假设问题在于我尝试添加 z 索引的对象是悬停对象,而且它们本身也不是常规的 div。
不管怎样,谢谢你至少阅读了这一切。我很感激你的时间, 詹姆斯
I am modifying a css3 nav that i found in a tutorial and I am having trouble with the z-indexing.
Please check out the nav here:
http://cafemeetup.com/testArea/nav/
If you rollover either of the 2 nav items, you can see that the z-indexing of the drop down box is higher than the link that spawned it.
This is not true as I have made the z-index of the rollover box lower in the stacking order.
What I am trying to achieve is to have the drop down box fall underneath the link so the the drop shadow of the drop down box is not visible on top. I want the link and drop down box to meld into one and I think by making the link sit on top of the drop down box, I can achieve this.
It is done here at Shopify:
http://www.shopify.com/ (rollover 'resources')
Anyway, hope someone can shed light on this.
I am assuming that the problem lies in the fact that the object I am trying to add z-indexes to are hovers and also that they are not regular divs as such.
Anyway, thank you for at least reading all this. I appreciate your time,
James
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
我在 jsFiddle 上为你做了一个演示。尝试将背景和 z-index 样式移动到 .drop 链接而不是代码中的列表项,它应该可以工作。
http://jsfiddle.net/sTsrb/
I made a demo for you on jsFiddle. Try moving your background and z-index style to the .drop link instead of the list item in your code and it should work.
http://jsfiddle.net/sTsrb/
您将
z-index:999
应用于,然后应用
z-index:1
到子元素。如果您希望它出现在
You are applying your
z-index:999
to the<li class="menu_right">
and then applyingz-index:1
to the<div class="dropdown_1column align_right">
child element. If you want it to appear underneath the<li>
, make it a sibling, not a child.