<!-- Integration of CSS for google Font - it should be integrated in <head></head> -->

<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>

<!-- MENU -->



<div class="menu">
  <span><a href="#">Home</a></span> <span><a href="#">About</a></span> <span><a href="#">Contact Me<a></span>   
</div>

 <br>
 <br>
 <h1 style="text-align:center;"> Sliding Menu made in CSS</h1>
 <span id="order">Hover the black line</span>
/* BODY */
body
{
  background-color:#A9D0F5;
  font-family: 'Oswald', sans-serif;
}

#order
{
  color:#58ACFA;
  font-size:15px;
  padding:50px 5px;
  background-color:white;
  
  border-radius:150px;
  border-style:solid;
  border-width:1px;
  border-color:#58ACFA;
  
  position:relative;
  
  top:20px;
  left:50vw;
  
  margin-left:-70px;
  
  display:inline-block;
  -webkit-transform:rotate3d(0,0,1,30deg);
  transform:rotate3d(0,0,1,30deg);
  
}

/* MENU */

.menu
{
  position:fixed;
  left:0px;
  top:-50px;
  
  width:100vw;
  padding:20px;
  text-align:center;
  
  background-color:rgba(0,0,0,0.9);
  box-shadow: 0px 2px 5px rgba(0,0,0,0.6);
  
  font-size:20px;
  color:white;
  
  /* transition */
  
  transition:top 1s;
  -webkit-transition:top 1s;
  
}

.menu:hover
{
  top:0px;  
}


/* SPAN OF SPAN */

.menu span
{
  margin:20px;  
}

.menu span a:hover
{
  color:rgba(255,255,255,0.5);  
}



/* Body and Title*/

a
{
  text-decoration:none;
  color:white;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.