在Navbar CSS / HTML中定位和对齐对象

Question

我正在尝试将当前侧面的链接移到顶部并按照它们在常规导航栏中对齐。

像这样： Rough Illustration of Goal

而不是目前如何在一旁聚集。

当前代码：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/

但是你需要玩你的效果来获得你需要的东西。