Question

我目前正在使用HTML / CSS3构建网站。它在所有桌面浏览器上都能完美显示，但在移动Safari中则不然（这是至关重要的）。该网站目前正在建设中：test.scccjapan.com，问题在于下拉导航菜单（“黑板 - 语法 - 动词”列表）。

列表特别长，但当向下滚动页面以到达列表底部时，菜单关闭，无法点击任何链接。

经过大量的反复试验后，我似乎已将问题缩小到overflow：scroll属性。如果我从CSS中删除这个属性，菜单工作得非常好，但是，我还有一个固定的背景图像并删除溢出将背景图像从固定状态变成更像滚动的东西，这也不是我的意思寻找。看来我可以有：

（a）功能齐全的菜单和滚动（静态）背景或（b）固定背景和“破损”菜单。

如果没有重新设计我的网站的这一部分来迎合这个问题，那么任何人都可以帮忙！？在编码方面，我不了解Java和相对的菜鸟，所以特定的信息会很有用。我也在互联网上搜索答案，并尝试了我能找到的任何东西，但无济于事。

提前致谢！：）

这是我的CSS（如果您需要更多信息，请告诉我）：

html {
    background: url(Backgrounds/Totoro.png);
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: 40%;
    background-attachment: fixed;
    background-color: #666;
    height: 100%;
    overflow: hidden;
    }
    body {
    height: 100%;
    -webkit-overflow-scrolling: touch;
    min-width: 900px;
    max-width: 100%;
    position: relative;
    overflow-x: hidden;
    overflow-y: scroll;
}
#Menu {
    text-align: center;
    white-space: normal;
    font-size: 15px;
    font-weight: bold;
}
/* Main Menu */

#Menu nav ul {
    padding: 0 10px;
    border-radius: 10px;
    list-style: none;
    position: relative;
    display: inline-table;
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
    text-align: left;
    text-shadow: 0px 1px 1px #fff;
    z-index: 99;
    -webkit-transform: translateZ(0);
}
#Menu nav img {
    height: 65px;
    width: 65px;
}
#Menu nav ul li a:hover {
    color: #4ed1fe;
    background: #bfbebe;
}
#Menu nav ul:after {
    content: "";
    clear: both;
    display: block;
}
#Menu nav ul li {
    float: left;
}
#Menu nav ul li:hover {
    background-color: #383838;
    box-shadow: inset 0px 0px 2px 2px #535353;
}
#Menu nav ul li a {
    display: block;
    padding: 10px 6px;
    color: #262626;
    text-decoration: none;
}
#Menu nav ul li:hover a {
    cursor: pointer;
    color: #fff;
    text-outline: #000;
    text-shadow: 2px 0px 5px #000;
}
/* Year Levels */
#Menu nav ul ul {
    background: #5d5d5d;
    border-radius: 1px;
    position: absolute;
    top: 100%;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    border-bottom: #9ca7b5 1px solid;
    display: none;
    box-shadow: 2px 0px 5px #000;
}
#Menu nav ul ul li {
    float: none;
    position: relative;
}
#Menu nav ul ul li a {
    padding: 10px 80px 10px 10px;
    color: #fff;
    border-top: #fff 0px inset;
}
#Menu nav ul ul li a:hover {
    color: #0CF;
    background: #bfbebe;
}
#Menu nav ul li:hover > ul {
    display: block;
}
/* Terms */
#Menu nav ul ul ul {
    position: absolute;
    left: 90%;
    box-shadow: 0px -3px 100px #000;
    top: 10px;
    white-space: nowrap;
}

overflow：滚动影响iOS上的下拉菜单

0 个答案: