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

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; }

还有一个 fiddle :http://jsfiddle.net/charliejsford/SAXmG/

Answer 1

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

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