css - 除非重新调整浏览器大小或打开新标签页，否则 Chrome 不会显示下拉菜单？

Question

这个问题困扰我很久了。基本上我有一个简单的下拉菜单，可以在悬停状态下激活一个链接。但是，当您第一次在 chrome 中加载网站(没有其他选项卡处于事件状态)时，当您将鼠标悬停在父级上时，子菜单会出现，然后当您尝试移动以选择它时，它会再次消失。我目前已经尝试了显示/可见性的所有不同组合，但没有任何效果。

有问题的网站deadpixelcreative

奇怪的是，如果您调整浏览器大小或打开另一个选项卡，菜单是否正常？

我完全不知所措，非常感谢任何帮助!

提前致谢!

.CSS

#cssmenu {


font-family: 'AlternateGothicCom-No2', sans-serif;
  line-height: 15px;
  text-transform: uppercase;
  text-align: center;
  position:fixed;
  width:100%;
  top: 0px;
  z-index:100;
}
#cssmenu > ul {
  width: 100%;
  list-style-type: none;
  padding: 0;
  margin: 0;
  background: #333333;
}
#cssmenu > ul li#responsive-tab {
  display: none; }
  /* Hide for large screens */

#norm {}

#cssmenu > ul li {
  font-size: 20px;
  display: inline-block;
  *display: inline;
  zoom: 1;
  color:#fff;
}
#cssmenu > ul li.right {
  float: right;
}
#cssmenu > ul li.has-sub {
  position: relative;
}
#cssmenu > ul li.has-sub:hover ul {
    visibility:visible;
}
#cssmenu > ul li.has-sub ul {
  visibility:hidden;
  width: 100%;
  left:0;
  float:left;
  position: fixed;
  margin: 0;
  padding: 0;
  list-style-type: none;
  background: #D9EE27;

}
#cssmenu > ul li.has-sub ul li {
  /*display: inline-block;*/
  color:#333;
  font-size:16px;
}

#cssmenu > ul li.has-sub ul li > a:hover{
  color:#fff;
}

#cssmenu > ul li.has-sub > a {
  background-repeat: no-repeat;
  background-position: 90% -95%;
}
#cssmenu > ul li.has-sub > a.active,
#cssmenu > ul li.has-sub > a:hover {
  background-position: 90% 195%;
  color:#333;
}
#cssmenu > ul li a {
  display: block;
  padding: 12px 24px 11px 24px;
  text-decoration: none;
}
#cssmenu > ul li a.active,
#cssmenu > ul li a:hover {
  background: #D9EE27;
}

Answer 1

我玩了一下，其实调试起来并不容易，因为当我打开Chrome开发者工具进行更改时，问题就消失了。我发现了以下内容，我希望其中一个能起作用，因为我自己无法真正检查它。

1. div#cssmenu 的高度为 38px，因为 anchor 标记的填充顶部为 12px，填充底部为 11px，行高为 15px。由于某些原因，在某些 View 中，div#cssmenu 的高度更改为 37px，而 anchor 标记仍为 38px。浏览器正在计算固定定位的 'li.has-sub > ul' 的顶部属性，这可能是由于未知边距或其他原因导致的问题，请尝试:

   li.has-sub ul {top : 37px}

2. '#wrapper' 实际上并没有包装任何东西，因为它的宽度被浏览器定义为 0px。它也在页面的顶部，它没有覆盖顶部的唯一原因是它的'-1' z-index。努力让它成为预期的样子。

如果添加“top: 37px”会导致您的网站出现响应问题，请尝试将其放在@media 中。

另一件值得一提的事情是，当您在移动设备上使用@media 进行查看时，请记住，对于触摸屏设备，您的下拉菜单不再处于悬停状态。

希望它能解决问题!