Пустая страница на правой стороне после панели навигации

Question

Извините, если эта тема обсуждалась слишком много. Я создал меню навигации, которое появится на экране, когда вертикальная прокрутка 100px и мне удалось сделать это из учебника из Интернета. однако я обнаружил, что в правой части экрана есть пустая страница примерно в 5 раз больше размера текущего экрана.

Вот HTML:

<header> 
<div> 
    <ul> 
     <li style='margin-left:30px;'><a href='index.php'>Beranda</a></li> 
      <li><a href='#'>Tutorial &#9662;</a> 
       <ul class='sub-menu'> 
        <li><a href='#'>CSS</a></li> 
        <li><a href='#'>HTML5</a></li> 
        <li><a href='#'>Javascript</a></li> 
       </ul> 
      </li> 
      <li><a href='#'>Web Design &#9662;</a> 
       <ul class='sub-menu'> 
       <li><a href='#'>Blogger Template</a></li> 
       <li><a href='#'>Menu Navigasi</a></li> 
       <li><a href='#'>Responsive Design</a></li> 
       <li><a href='#'>Codding</a></li> 
       </ul> 
      </li> 
      <li><a href='#'>About Us</a></li> 
      <li><a href='#'>Contact</a></li> 
    </ul> 
</div> 
</header> 

Вот CSS:

header { 
position: fixed; 
top: 0; 
display: none; 
width: 100%; 
margin: 0; 
height: 30px; 
background-color: rgba(238,238,238,0.8); 
z-index:100; 
font-family:'Oswald', Arial, sans serif; 
-webkit-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49); 
-moz-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49); 
box-shadow:   0px 3px 5px rgba(100, 100, 100, 0.49); 
} 
header ul, header ul ul.sub-menu { 
padding:0; 
margin: 0; 
} 
header ul li, header ul ul.sub-menu li, header ul ul.sub-menu ul.sub-sub-menu li { 
list-style-type: none; 
display: inline-block; 
margin:0; 
padding:0; 
} 
header ul li a { 
padding:0 5px; 
display: inline-block; 
height: 30px; 
text-align: left; 
line-height: 30px; 
text-decoration: none; 
color:#333; 
font-size:20px; 
} 
header li:hover a { 
color: #eee; 
text-decoration:none; 
background: #888; 
} 
header ul li ul.sub-menu li a { 
display: inline-block; 
background: rgba(238,238,238,0.8); 
color: #333; 
height: 30px; 
line-height: 20px; 
font-size:14px; 
font-weight:300; 
min-width: 160px; 
padding: 5px; 
border-bottom: 1px solid #333; 
} 
header ul li ul.sub-menu li:hover a { 
color: #eee; 
text-decoration:none; 
background: #888; 
} 
header ul li ul.sub-menu li ul.sub-sub-menu li a { 
display: inline-block; 
background: rgba(238,238,238,0.8); 
color: #333; 
height: 30px; 
line-height: 20px; 
font-size:14px; 
font-weight:300; 
min-width: 160px; padding: 5px; 
border-bottom: 1px solid #333; 
} 
header ul li ul.sub-menu li ul.sub-sub-menu li:hover a { 
color: #eee; 
text-decoration:none; 
background: #888; 
} 
header ul li { 
position: relative; 
} 
header ul li ul.sub-menu { 
display:none; 
position: absolute; 
top: 30px; 
left: 0; 
width: 100px; 
} 
header ul li:hover ul.sub-menu { 
display: inline-block; 
text-decoration: none; 
font-weight:300; 
} 
header ul li ul.sub-menu li ul.sub-sub-menu { 
display:none; 
position: absolute; 
top:0; 
left: 100%; 
width: 100px; 
} 
header ul li ul.sub-menu li:hover ul.sub-sub-menu { 
display: inline-block; 
text-decoration: none; 
font-weight:300; 
} 

Вот JS:

$(window).scroll(function() { 
    if ($(this).scrollTop() > 100 && !$('header').hasClass('open')) { 
    $('header').addClass('open'); 
    $('header').slideDown(); 
    } else if ($(this).scrollTop() <= 100) { 
    $('header').removeClass('open'); 
    $('header').slideUp(); 
} 
}); 

Я хочу спросить, если есть какие-либо ошибки в CSS, который я сделал? Благодарим вас за помощь. * Извините, что я не очень хорошо говорил по-английски

Answer 1

Похоже, что он работает in this fiddle. Я просто добавил декларацию высоты тела, как это:

body { 
    height: <any height greater than 100px>; 
} 

Я думаю, что, может быть, немного больше информации необходимо, чтобы увидеть то, что вы говорите. У вас есть страница где-то где-то? Даже немного более полная картина html, с которой вы работаете. Я не вижу «пустую область», о которой вы здесь говорите.