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/

しかし、あなたが一緒にプレイする必要がありますあなたが必要とする何かを得るためのあなたの効果。