html - 静态下拉菜单 - 需要停止它移动位置

Question

一段时间以来，我一直在玩弄下拉导航菜单的 css 位置，但似乎无法让它保持在应有的位置。

我的菜单示例可以在这里找到：http: //jsfiddle.net/W8UFZ/

下拉区域的 CSS 是

.rscss-horizontal_nav ul li ul {
    margin: 0 0 0 0;
    padding: 5px 0 0 0;
}

当页面根本不向下滚动时，下拉菜单就可以了。但是，当您向下滚动一点时，菜单不会向上移动以保留顶级导航项。

我似乎找不到导致此问题的原因，并尝试了下拉菜单的不同位置样式，但仍然无济于事。

有没有人有任何想法？

Answer 1

查看http://jsfiddle.net/W8UFZ/5/

所做的更改：

 .rscss-horizontal_nav {
   /* remove overflow:hidden; here! */
 }

 .rscss-horizontal_nav ul li {
    display: inline-block;
    float: left;
    font-size: 1.0em;
    line-height: 1em;
    list-style-type: none;
    margin: 0 .25em 0 0;
    padding: 0;
    z-index: 99;
    position:relative;
}
 .rscss-horizontal_nav ul li ul {
    margin: 0 0 0 0;
    padding: 7px 0 0 0;
    position:absolute;
    left:0;
    top:27px;
    z-index:100;
}

这应该可以解决问题！

杰伦

Answer 2

试试这个

.rscss-horizontal_nav ul li ul {
    margin: 0 0 0 0;
    padding: 5px 0 0 0;
    top:0;
    position:absolute;
}

也许它可以帮助你..

Answer 3

position: fixed如链接所示申请

检查这个小提琴 - http://jsfiddle.net/W8UFZ/2/

在你的 CSS 中添加了这个 -

.rscss-horizontal_nav{
    position:fixed;
}

让我知道这是否是您正在寻找的。