Question

我期待这个website。我不知道为什么它有这个巨大的卷轴。我试着理解创建此滚动的原因或位置。

Answer 1

问题在于这个div .nav-path-wrap它有diplay:initial并且在悬停时你创建了position absolute，它总是会在你的页面上有空间，即使它不是可见。

所以你只需要制作display:none并悬停display:block

css必须是这样的：

.left_menu .nav-path-wrap {
    background: url(../images/icons/icon_left_menu_arrow_l.png) no-repeat left 1em;
    padding-left: .7em;
    display: none; // edit this from initial to none
}

.left_menu li:hover .nav-path-wrap {
    position: absolute;
    left: 12em;
    top: -.5em;
    height: 100px;
    display: block; // add this line
}

请注意，如果您编辑了.left_menu { overflow: hidden; }。子菜单.nav-path-wrap在悬停时不会显示

Answer 2

.left_menu li:hover ul {
    top: -.8em;
    left: .7em;
    display: inline-block;//add
}
.left_menu li ul {
    background: #109CD8;
    z-index: 100;
    display: none;//change
    height: auto;
    padding: .3em 1em 1em 1.4em;
    left: -999em;
    position: absolute;
    -webkit-box-shadow: 3px 3px 5px 0px #053047;
    box-shadow: 3px 3px 5px 0px #053047;
    width: 14.6em;
}

Answer 3

所以我经历了检查员删除元素，直到我遇到罪魁祸首。

ul.left_menu.clearfix是造成布局问题的原因。如果删除.left_menu类，列表会溢出到一个巨大的垂直列表中，并且空格会消失。

这不是“最佳”解决方案，但您可以删除该类，添加固定高度，然后将overflow-y设置为滚动。

你可能会找到更优雅的选择。

巨大的，不必要的和神秘的滚动条

3 个答案: