在导航栏 CSS/HTML 中定位和对齐对象

Question

我正在尝试将当前位于侧面的链接移动到顶部并像在常规导航栏中一样对齐。

喜欢这个：目标的粗略说明

而不是目前

全部堆积在一边。

当前代码：https://jsfiddle.net/58dn7rw7/

#mySidenav a {
    position: fixed;
    right: -90px;
    transition: 0.3s;
    padding: 15px;
    width: 120px;
    color: white;
    border-radius: 100px 0 0 10px;
    text-align: right;
    text-decoration: none;
    font-family: 'Quicksand', sans-serif;
    font-size: 20px;
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}
#mySidenav a:hover {
    right: 0;
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}

感谢您的任何帮助。

Answer 1

如果你想

坚持你的代码，我会以某种方式更新它：

.HTML：

      <nav>
    <div id="mySidenav">
      <ul>
          <li> <a href="#" id="about">About</a></li>
          <li> <a href="#" id="blog">blog</a></li>
          <li> <a href="#" id="projects">projects</a></li>
          <li> <a href="#" id="contact">contact</a></li>
      </ul>

    </div>
  </nav>

.CSS：

ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;    
}
li {
float: right;
margin-left:6px;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
 a:hover:not(.active) {
  background-color: #111;
 }
 #mySidenav a {
 position: relative;
 transition: 0.3s;
 padding: 15px;
 width: 120px;
 color: white;
 border-radius: 100px 0 0 10px;
 text-align: right;
 text-decoration: none;
 font-family: 'Quicksand', sans-serif;
 font-size: 20px;
 -ms-transform: rotate(0deg);
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg); }
 #mySidenav a:hover {
  right: 0;
 -ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
 transform: rotate(360deg); }
#about {
background-color: #4CAF50; }
#blog { 
 background-color: #2196F3; }
 #projects {
 background-color: #f44336; }
 #contact {  
 background-color: mediumorchid; }

https://jsfiddle.net/emilvr/58dn7rw7/2/

但是你需要玩你的效果才能得到你需要的东西。