页面顶部不需要的导航

unwanted nav that is at the top of the page

我可能遇到了一个奇怪的问题,因为我通常希望 nav 始终位于页面顶部,但我不想这样做。我想让用户下楼,我的导航消失了

li
{
   display:block;
   float: left;
}

nav li {
    width: 40px;
    height: 35px;
    text-align: center;
    position: relative;
    transition: 0.3s;
    margin: 3rem;
}

nav li::before,
nav li::after {
    content: '';
    position: absolute;
    width: inherit;
    height: inherit;
    top: 0;
    left: 0;
    transition: 0.3s;
}

http://jsfiddle.net/KubaPilat/jrnc5web/

位置不能固定在class“social”中,只需将其删除并使导航具有宽度的 100%