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的更完整的图片。我看不到你在这里谈论的“空白区域”。

导航栏后右侧的空白页

1 个答案: