0

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

这是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/

4

2 回答 2

0

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

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

于 2013-03-31T21:54:00.093 回答
0

不定义任何 z-index 应该不是问题，而且我认为到处定义无用的 z-index 是不明智的。

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

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

于 2013-03-31T22:02:31.733 回答