[英]CSS ul li, hover from 2nd level
Please help to improve a ul li menu. 请帮助改善菜单。
Please check my example http://jsfiddle.net/fantill/SBkRk/ 请检查我的示例http://jsfiddle.net/fantill/SBkRk/
Now it is hover-able from the 1st level of menu, but I want it to be hover-able from 2nd level with keep the current hover effect. 现在它可以从菜单的第一级悬停,但是我希望它可以从第二级悬停并保持当前的悬停效果。 ( display 1st and 2nd level and hide the remained )
( 显示第一级和第二级并隐藏其余的)
I tired a lot but I couldn't find a way to do that, the hover setting seem will only work from the 1st level due to the position: relative, absolute
issue. 我很累,但是我找不到办法,由于
position: relative, absolute
问题,悬浮设置似乎只能从第一级开始工作。
Thank you very much for your advice. 非常感谢您的建议。
Now is like 现在就像
--------------------
| 1st | 2nd | 3rd |
| ----|-------------
| | |
|-----|-----|
| |
-------
I want it to be like this 我希望它像这样
1st and 2nd level are always visible
-------
| 1st |
| ----|------
| |2nd| 3rd |
|-----|------
| |2nd|
-------
I have updated your jsfiddle to work how you want. 我已经更新了您的jsfiddle,使其可以按照您的要求工作。 This is updated css:
这是更新的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%;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.