我在YouTube上观看视频后制作了一个html/css侧边栏菜单。我想让我的菜单固定位置，并在左侧全高。我有谷歌如何做到这一点，我找到了很多解决方案，但我尝试的每一个都隐藏了我的菜单，除了第一项
这是我的网页：
body{
margin: 0px;
padding: 0px;
font-family: "Arial", Helvetica, sans-serif;
background: #1C1C1C;
}
.menu ul{
margin: 0;
padding: 0;
list-style: none;
}
.menu ul li{
padding: 15px;
width: 160px;
height: auto;
position: relative;
background-color: #424242;
cursor: pointer;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.menu ul li:hover{
background-color: #FA5858;
}
.menu > ul > li{
border-right: 5px solid #FF0000;
}
.menu ul ul{
transition: all 0.3s;
opacity: 0;
position: absolute;
border-left: 5px solid #FF0000;
left: 100%;
top: -2%;
}
.menu ul li:hover > ul {
opacity: 1;
visibility: visible;
}
.menu ul li a{
color: #fff;
text-decoration: none;
display: block;
}
span{
margin-right: 15px;
}<!DOCTYPE html>
<html>
<head>
<title>Menu</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
</head>
<body>
<div class="menu">
<ul>
<li><a href=""><span class="far fa-newspaper"></span>one</a></li>
<li><a href=""><span class="far fa-list-alt"></span>two</a></li>
<li><a href=""><span class="fas fa-user-secret"></span>three</a></li>
<li><a href=""><span class="fas fa-shopping-basket"></span>four</a>
<ul>
<li><a href=""><span class="far fa-address-book"></span>d one</a></li>
<li><a href=""><span class="fas fa-globe"></span>d two</a>
<ul>
<li><a href=""><span class="fas fa-sliders-h"></span>d d one</a></li>
<li><a href=""><span class="far fa-envelope-open"></span>d d two</a></li>
</ul>
</li>
</ul>
</li>
<li><a href=""><span class="far fa-question-circle"></span>five</a></li>
</ul>
</div>
</body>
</html>如果有人可以帮助我解决这个问题，那就太好了，如果你也能解释为什么会发生这种情况，这样我将来就不会有这个问题，那就更好了。
谢谢
你应该在 CSS 中使用 position 和 top 属性。 就像这样。
menu {position: fixed;
top: 0; /* Just change directions. like bottom:0; etc
/* you can add all the other attributes if you want
}