[我需要帮助为现代垂直导航栏制作CSS

Question

我一直在玩（我认为）现代的垂直导航栏，我已经把它弄下来了很多，但是它好像并没有真正的响应能力。如果改写的话会更好。非常感谢您的帮助：)，或者如果您有任何了解或发现的视频，也会使我朝着可行的方向发展！

[我尝试制作两个普通部分，其中一个部分的宽度大约为8vw，然后一直向下，然后在我的其余内容中再加上一个第二部分，这很好。

希望你们很安全。

What I designed

至于代码，我已经完成了几乎所有的网络流程，自从搬家以来，我现在没有主PC，希望这可以使我在现场我所拥有的。

https://looskie.webflow.io

Answer 1

您可以从这样的内容开始：

html,
body {
  min-height: 100%;
  max-height: 100%;
  height: 100%;
  font-family: Oswald, sans-serif, Arial;
  font-size: 14px;
  background: #fff
}

a {
  text-decoration: none
}

li {
  list-style: none
}

ul {
  margin: 0
}

.main-nav {
  width: 100vh;
  height: 45px;
  position: fixed;
  background: #4c4c4c;
  -webkit-transform-origin: left top;
  -webkit-transform: rotate(-90deg) translateX(-100%);
}

ul.nav {
  margin: 0 auto;
  height: 100%;
}

ul.nav li {
  margin-right: 20px;
  float: right;
  height: 100%;
  line-height: 45px;
}

ul.nav li a {
  color: #fff;
}

<div class="main-nav">
  <ul class="nav">
    <li><a href="#">HOME</a></li>
    <li><a href="#">METHODOLGY</a></li>
    <li><a href="#">PORTFOLIO</a></li>
    <li><a href="#">SERVICES</a></li>
    <li><a href="#">TEAM</a></li>
    <li><a href="#">CONTACT</a></li>
  </ul>
</div>