Question

所以，我的CSS下拉菜单有一个奇怪的错误。我正在设计的网站有一个标准的index.html作为主页，其中包含两个主要部分：

顶部的菜单标题。
iframe在中间加载了所有选定的页面。

用户将鼠标悬停在顶部的四个菜单类别中的一个上，然后会出现一个包含所有子选项的下拉列表，点击后会将该页面加载到该框架中。

我遇到的问题，这只是Chrome浏览器中的Firefox＆amp; IE工作正常，如果用户刷新页面或按F5，当鼠标悬停在其中一个菜单类别上时，所有子选项都消失了。然而，奇怪的是链接仍处于活动状态，因此即使用户点击应该在的区域中看不到任何书写，页面仍会加载到框架中。

这是因为我更改主页以使用iframe而不是直接打开页面，因为菜单内容打开了框架的顶部。涵盖这些菜单的CSS如下所示：

.menu-head-td, .menu-item {
transition: background-color 0.25s;
}

.menu-head-td:hover {
    background-color:#37465D;
    color:#FFFFFF;
    cursor:pointer; 
}


.menu {
    cursor:pointer;
    height:100%;
    vertical-align:bottom;
}
.menu-content {
    display: none;
    position: absolute;
    background-color:#37465D;
    width:100%;
    z-index: 10;
    opacity:0.9;
    left:0px;
    top:93px;
}
.menu-item:hover {
    background-color:#3466B1;
}

.menu:hover .menu-content {
    display: block;
    color: #FFFFFF;
}

菜单全部由简单和标签组成，没有javascript或类似的东西。我应该提一下，如果用户点击地址栏并按下回车键，它似乎再次重新加载主页，菜单再次正常。奇怪嘿嘿？！

Answer 1

所以我终于找到了答案，另一个网站上的用户建议移动浏览器检测CSS文件中列出的字体文件的顺序。

最初* .ttf文件列在* .woff文件上方，我重新排列它们以便首先检测* .woff文件并且它完美地运行。也许Chrome与TTF文件斗争。

页面刷新时CSS下拉菜单消失

1 个答案: