Positionieren und Ausrichten von Objekten in Navbar CSS/HTML

Question

Ich versuche, die Links, die sich derzeit auf der Seite befinden, nach oben zu verschieben und so auszurichten, wie sie in einer normalen Navigationsleiste sind.

So: Rough Illustration of Goal

statt, wie es zur Zeit ist alles in der Seite gerafft.

Aktuelle Code: 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); 
} 

Vielen Dank für jede Hilfe.

Answer 1

Wenn Sie Ihren Code bleiben will, muss ich es irgendwie aktualisieren:

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/

Aber Sie müssen mit spielen Ihre Effekte, um etwas zu bekommen, was Sie brauchen.