gpt4 book ai didi

弹出菜单的CSS在Chrome中工作不同

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

我遇到了弹出菜单在 Chrome 中与在 IE 或 Firefox 中表现不同的问题。

这是HTML

  <body>
<ul>
<li><a href="url">Level One</a>
<ul>
<li><a href="url">Level Two Item One</a></li>
<li><a href="url">Level Two Item Two</a>
<ul>
<li><a href="url">Level Three</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</body>

这是CSS

 ul {
padding: 0px;
list-style-type: none;
}

li {
background-color: blue;
}

a:link {
text-decoration:none;
color: #0000ff;
margin: 5px 0px 5px 0px;
background-color: cyan;
display: inline-block;
width: 200px;
}

li {
position: relative;
}

li > ul {
display: none;
}

li:hover > ul, li.sfhover > ul {
left 100%;
top 0;
position: absolute;
display: inline-block;
}

li:hover > ul li, li.sfhover > ul li {
background-color: #33ff33;
width: 200px;
position: relative;
}

在 Firefox 和 IE 中,第三级弹出到第二级第二项的右侧。在 Chrome 中,第三级会在第二级下方弹出第二项。

我知道它与使链接成为 block 元素有关,但我希望链接显示为内联 block 。另外,我无法更改 HTML。它来自 CMS(我已将其简化以说明问题)

如有任何建议,我们将不胜感激。

最佳答案

您的 CSS 中缺少几个冒号,特别是这条规则:li:hover > ul, li.sfhover > ul

left 100%; 应该是 left:100%;top 0; 应该是 top:0;

关于弹出菜单的CSS在Chrome中工作不同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33092080/

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