0

我在将 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 {
    bottom: 38px;
    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

2 回答 2

0

bottom: 38px;从下面的代码中删除它：

#navigation li:hover ul {
    bottom: 38px;/*Just Remove This*/
    display: block;
}

将 top:0 添加到 #navigation ul li ul li

#navigation li ul li {
    background: none repeat scroll 0 0 transparent;
    top: 0;/*Add This*/
    width: 100%;
}

我想这会对你有所帮助。

于 2012-06-08T11:25:37.000 回答
0

当很难找到错误时，总是复制代码并将其分解成最小的最简单的块。

希望这会有所帮助：http: //jsfiddle.net/ccS7q/

但是，除非您使用 jquery 或 javascript，否则您将无法实现向上列出子列表的下拉菜单。上面的小提琴不能向上列出，您可以ul li.menu-item ul top随着列表的延长手动调整值。虽然工作量很大。我建议您改用 jquery。

于 2012-06-08T12:21:11.973 回答