position the nav elements to the top right

Description

Demo Code

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
@import url('https://fonts.googleapis.com/css?family=Nunito|Open+Sans');
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');


* {<!--  w  w  w . j  ava  2  s.c  om-->
   - margin: 0;
   border: 0;
   padding: 0;
}
body {
   background-color:Chartreuse;
   font:15px/21px'Nunito', 'sans-serif';
   color:yellow;
   margin:0;
}

.wrapper {
   margin:0 auto;
   width:71%;
   clear:both;
}

.container {
   margin-left:31px;
   margin-right:31px;
}

img#logo {
   height:81px;
   width:auto;
   margin:11px;
}

ul {
   list-style:none;
}

nav.top-nav {
   position:absolute;
   right:0;
   top:0;
}

nav.top-nav>ul>li>a {
   color:blue;
   text-decoration:none;
   padding:0 0 0 11px;
   text-align:right;
}

nav.top-nav>ul>li {
   display:inline-block;
}

header.top-header {
   margin-top:11px;
   background-color:pink;
   height:100px;
}

nav.navigation-menu {
   background-color:OrangeRed;
   color:grey;
   height:51px;
}

nav.navigation-menu>ul>li>a {
   color:BlueViolet;
}
</style> 
 </head> 
 <body> 
  <header class="top-header"> 
   <div class="container"> 
    <div class="logo"> 
     <img src="https://www.java2s.com/style/demo/Safari.png" alt="" href="http://www.usjr.edu.ph" id="logo"> 
    </div> 
    <nav class="top-nav"> 
     <ul> 
      <li class="current"> <a href="index.html">Lorem i</a> </li> 
      <li> <a href="">Lorem i</a> </li> 
      <li> <a href="">Lorem i</a> </li> 
     </ul> 
    </nav> 
   </div> 
  </header> 
  <nav class="navigation-menu"> 
   <ul> 
    <li> <a href="#">Lorem i</a> </li> 
    <li> <a href="#">Lorem i</a> </li> 
    <li> <a href="#">Lorem i</a> </li> 
    <li> <a href="#">Lorem i</a> </li> 
   </ul> 
  </nav>  
 </body>
</html>
position the nav elements to the top right - HTML CSS CSS Layout

Description

Demo Code

Related Tutorials
