Huge, unnecessary and mysterious scroll bar [closed] - html

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I'm looking to this website. And I have no idea why it has this huge scroll. I'm try understand why or where this scroll is created.

Answer 1

The problem is in this div .nav-path-wrap it has diplay:initial and on hover you make its position absolute , it always will have its space on your page even it not visible.
so you just need to make its display:none and on hover display:block
css must be like this :
.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
}
note that if you edited the .left_menu { overflow: hidden; }. the sub menu .nav-path-wrap will not be visible on hover

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

So I've gone through the inspector deleting elements until I came across the culprit.
The ul.left_menu.clearfix is what's causing the layout problem. If you remove the .left_menu class, the list spills out into a huge vertical list, and the white space disappears.
This isn't the "best" solution, but you can remove that class, add a fixed height, and then set the overflow-y to scroll.
You may find a more elegant option though.