gpt4 book ai didi

html - CSS ul li,从第二层悬停

转载 作者:太空宇宙 更新时间:2023-11-04 04:46:49 26 4
gpt4 key购买 nike

请帮助改进 ul li 菜单。

请检查我的例子http://jsfiddle.net/fantill/SBkRk/

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

我累了很多,但我找不到办法,由于 position: relative, absolute 问题,悬停设置似乎只能从第 1 级开始工作。

非常感谢您的建议。

现在就像

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

我希望它是这样的

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

最佳答案

我已经更新了你的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%;
}

关于html - CSS ul li,从第二层悬停,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14317181/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com