css - 子菜单消失在父菜单后面

Question

我的子菜单有问题。这是一个简单的下拉菜单，我在我的帖子旁边，我让它工作了。问题是，根据我的滚动位置，它有时会到达我的屏幕底部。我正在考虑制作类似于http://9gag.com的菜单的东西，其中菜单固定在 50% 的屏幕上。但我想那太复杂了。

我尝试将父菜单 z-index 设置为较低的值，但它不起作用？我会很感激任何帮助。

这是小提琴：http: //jsfiddle.net/HyKuR/

.Post .Bottom .nav { 
                            display: block;
                            line-height: 24px;
                            font-weight: bold;
                            margin: -140px 450px 0px; 
                            position: absolute;
                            z-index:2;
                            }

                     .Post .Bottom .nav li.submenu ul { 
                           visibility:hidden;
                           -webkit-padding-start: 0 !important;
                            margin-left: 40px;
                            margin-top: -215px;
                            bottom:100%;
                            background-color: white; 
                            border:1px solid gray;

                             }
                    .Post .Bottom .nav li.submenu:hover ul {
                             visibility: visible }


                    .Post .Bottom .nav li.submenu  ul li { 
                             border-bottom:1px solid gray
                             z-index:10 !important;
                            }

Answer 1

正如滴水所说，在 jsfiddle 中给我们您的代码，以便我们提供帮助。但从我的脑海中，我会说你的问题归结为你的位置：两个菜单上的绝对值。您应该在父菜单上使用 position:relative 然后在子菜单上使用 position:absolute 以便它基于父菜单而不是屏幕放置。