Question

将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;
}

Answer 1

从以下代码中删除bottom: 38px;：

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

将顶部：0添加到#navigation ul li ul li

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

我认为这会对你有帮助。

Answer 2

如果很难找到错误，请始终将代码复制并分解为最小的最简单的块。

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

但是除非你使用jquery或javascript，否则你无法使用列出的子列表来实现下拉菜单。上面的小提琴无法向上列出，您可以在列表延长时手动调整ul li.menu-item ul top值。虽然它做了很多工作。我建议你改用jquery。

CSS下拉菜单未正确显示

2 个答案: