如何将菜单固定在屏幕的上半部分？

Question

我正试图创造一个侧面菜单。 我不知道最好的方法是什么。 我的问题是如何将菜单固定在屏幕的上半部分？ 谢谢你:)）

这是HTML

<!--menu-->

<div class="menu">
<div class="option" align="center">
    <ul>
        <li><a href="#">דף הבית</a></li>
        <li><a href="#">צור קשר</a></li>
        <li><a href="#">בלוג</a></li>
        <li><a href="#">מי את גברת?</a></li>
    </ul>
</div>
</div>
<!--endmenue-->

CSS

div.menu{
    position: fixed;
    width: 20%;
    height: 100%;
    background: black;
    right: 0;


}

div.option{
    padding-top: 50%;
    padding-bottom: 50%;

}

div.option a{
    text-decoration: none;
}

div.option ul{
    list-style-type: none;
    text-align: center;
    font-family: alef;
    font-weight: 700;
    color: white;
    line-height: 400%;
    margin: 0;
    padding: 0;
}

Answer 1

试试这个：

div.menu{
    position: fixed;
    width: 20%;
    height: 100%;
    background: black;
    right: 0;
    top: 0; // added this
}

我添加了top:0，它将元素附加到它的父级

的顶部

Answer 2

在CSS中我会添加     * {     保证金：0px;     填充：0px;     } 这将有助于讨厌不必要的边距和填充

Answer 3

我想你需要这个吗？

div.menu{
    position: fixed;
    width: 100%;
    background: black;
    right: 0;
}

div li{
    display: inline-block;
    margin-right: 10%;
}

div.option a{
    text-decoration: none;
}

div.option ul{
    list-style-type: none;
    text-align: center;
    font-family: alef;
    color: white;
    line-height: 200%;
    margin: 0;
    padding: 0;
}

请参阅此处JsFiddle