无法修复 html/css 侧边菜单 - 从这里尝试了很多解决方案

Question

在 YouTube 上观看视频后，我制作了一个 html/css 侧边栏菜单。我想让我的菜单固定位置，并在左边全高。我有 Google 如何执行此操作，我找到了很多解决方案，但我尝试的每个解决方案都隐藏了我的菜单，除了第一项

这是我的html：

 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>

如果有人能帮我解决这个问题就好了，如果你能解释为什么会这样就更好了，这样我以后就不会遇到这个问题了。

谢谢

Answer 1

您应该在 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 
  }

无法修复 html/css 侧边菜单 - 从这里尝试了很多解决方案

cant make html/css side menu fixed - tried many solutions from here

html

css

menu

fixed