1

我几乎可以肯定这个问题已经以一种或另一种形式得到了回答。应用我在这里和其他地方发现的更改似乎并没有让我更进一步。

我正在尝试将css菜单从crisislab.nl从下拉菜单更改为下拉菜单。（正如您在我目前正在开发的网站上看到的那样。）

我遇到的当前问题是菜单似乎工作正常，预计菜单文本向下显示并且菜单向上移动的事实（如果这听起来不合逻辑，请查看crisislab.nl )

请参阅下面的代码了解我当前的进度。有愿意帮忙的吗？

提前谢谢了！

                #navigation {
                width: 980px;
                height: 38px;



        }
            #navigation li {
                float: left;
                position: relative;

                               top: 220px;
            } #navigation li:hover { background: transparent  url(gfx/navigation_hover.png) repeat; }
                #navigation li a {
                    text-transform: uppercase;
                    color: white;
                    padding: 13px 33px;
                    line-height: 38px;
                    font-size: 11px;
                }
                    #navigation li a:hover { text-decoration: none;}
                    #navigation li ul {

                        position: absolute;
                        background: transparent  url(gfx/navigation_hover.png) left top repeat;
                        z-index: 1000;
                        min-width: 100%;
                                                 display:none; 
                                                left:-1px;
                    }
                    #navigation li:hover ul {


                                                        display:block;   

                    }
                        #navigation li ul li {
                            background: none;
                            width: 100%;
                    }
                            #navigation li ul  li:hover {
                                    background: none;
                                background-color: #2a51b5;



                            }
                            #navigation li ul li a {
                                text-transform: uppercase;
                                color: white;
                                padding-left: 8px 10px;
                                line-height: 28px;
                                width: 100%;
                                display:block;



                            }
4

1 回答 1

3

从下拉菜单到下拉菜单的基本区别是 child 的偏移量ul：

下拉菜单有top:<x>px;，如果你想要一个下拉菜单，你只需说：bottom:<x>px;

我修改了您的代码以使其工作：http: //jsfiddle.net/fJSVz/

基本上我改变了以下规则：

#navigation li ul {
     top: -9999px;        /* <- removed */
     display:none;        /* <- this will trigger the hide/show */
}
#navigation li:hover ul {
     bottom:20px;         /* <- this is the trick to push the ul up */
     display:block;       /* <- show the ul on hover */
}
于 2012-06-08T08:59:06.243 回答