Question

我的网站有一个导航菜单：

这是HTML

<ul id="trans-nav">
    <li><a href="#">About Us</a>
        <ul>
        <li><a href="/contact">Contact Us</a></li>
        <li><a href="/login">Login</a></li>
        </ul>
    </li>
</ul>

您可以看到它在链接下方有一个下拉菜单（子菜单），但子菜单显示在菜单下方的页面内容下。

如何让它在页面内容上显示子菜单而不是在后面？

这是CSS：

#trans-nav {list-style-type: none; height: 40px; padding: 0; margin: 0; }
#trans-nav { list-style-type: none; height: 40px; padding: 0; margin: 0; }
#trans-nav li { float: left; position: relative; padding: 0; line-height: 40px; }
#trans-nav li:hover { background-position: 0 -40px; }
#trans-nav li a { display: block; padding: 0 15px; color: #666666; text-decoration: none; }
#trans-nav li a:hover { background-color:#F36F25; color: #eeeeee; }
#trans-nav li ul { opacity: 0; position: absolute; left: 0; width: 8em; background: #EEEEEE; list-style-type: none; padding: 0; margin: 0; }
#trans-nav li:hover ul { opacity: 1; }
#trans-nav li ul li { float: none; position: static; height: 0; line-height: 0; background: none; }
#trans-nav li:hover ul li { height: 30px; line-height: 30px; }
#trans-nav li ul li a { background: #EEEEEE; }
#trans-nav li ul li a:hover { background: #666666; color:#EEEEEE; }

#trans-nav li { -webkit-transition: all 0.2s; }
#trans-nav li a { -webkit-transition: all 0.5s; }
#trans-nav li ul { -webkit-transition: all 1s; }
#trans-nav li ul li { -webkit-transition: height 0.5s; }

也是一个小提琴：http://jsfiddle.net/charliejsford/SAXmG/

Answer 1

您似乎没有定义任何z-index。如果没有它，页面中稍后出现的元素将显示在顶部。

要解决此问题，我建议您在列表的样式中添加position:relative，然后您还可以添加z-index:1000或其他合适的号码。

Answer 2

不定义任何z-index应该不是问题，我不认为在任何地方定义无用的z-index是明智的。

使用您发布的示例CSS代码，您的菜单应位于其后面的任何静态元素的顶部，因为您的菜单已定位且页面的其余部分未定位。

因此，如果你的子菜单落后于页面内容，那么你所谈论的页面内容也必须定位，这可能是你真正的问题。

显示在后面而不是在其他页面内容之上的css / html子菜单

2 个答案: