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

我遇到了弹出菜单在 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/