CSS ul li,从第2级悬停

时间:2013-01-14 10:58:45

标签: html css menu hover

请帮助改进ul li菜单。

请查看我的示例http://jsfiddle.net/fantill/SBkRk/

现在它可以从菜单的第1级悬停,但我希望它可以从第2级悬停,并保持当前的悬停效果。 (显示第1和第2 级别并隐藏剩余部分)

我累了很多但我找不到办法做到这一点,由于position: relative, absolute问题,悬停设置似乎只能在第一级工作。

非常感谢你的建议。

现在就像

--------------------
| 1st | 2nd |  3rd |
| ----|-------------
|     |     |
|-----|-----|
|     |
-------

我希望它像这样

1st and 2nd level are always visible
-------
| 1st |
| ----|------
| |2nd| 3rd |
|-----|------
| |2nd|
-------

1 个答案:

答案 0 :(得分:2)

我已根据您的需要更新了您的jsfiddle。这是更新的css:

.MM ul {
  position:absolute;
    list-style: none;
    margin: 0;
    padding: 0;
    z-index: 2;
}
.MM ul li:hover > ul {
    display:block;
}
.MM ul li {
    position: relative;
  display: block;
}
.MM ul ul {
    display:none;
    position: relative;
    white-space: nowrap;
    top: 0;
    left:0;
}
.MM ul ul ul {
  position: absolute;
    top: 0px;
    left: 100%;
}