Question

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

我正在尝试将来自crisislab.nl的css菜单从下拉菜单更改为下拉菜单。（正如您在网站上看到的那样，我正在研究它。）

我遇到的当前问题是菜单似乎工作正常，期望菜单文本向下显示并且菜单向上移动（如果这听起来不合逻辑，请查看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;



                            }

Answer 1

从下拉列表到dropup的基本区别是孩子ul的偏移量：

下拉列表有top:<x>px;，如果你想要一个dropup，你只需说：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 */
}

在下拉菜单中更改CSS下拉菜单

1 个答案: