Pop up navbar example

by Michael Wagner

HTML

<nav>
  <ul>
    <li><a href="#"><div class="menuItem">Home</div></a></li>
    <li><a href="#"><div class="menuItem"> Upcoming Flights</div></a></li>
    <li><a href="#"><div class="menuItem"> About Us </div></a></li>
    <li><a href="#"><div class="menutem"> Travel Guide</div></a></li>
    <li><a href="#"><div class="menuItem"> Contact Us </div></a></li>
  </ul>
</nav>

<div>
  <img src="http://lorempixel.com/g/400/200" alt="">
</div>

CSS

nav { 
  height: 58px;
  margin: 0;
  padding: 0;
  overflow: hidden;
}


nav li {
  width: 16%;
  margin: 14px 0 0px 14px;
  padding: 0;
  list-style-type: none;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px; 
  border: 5px solid black;
  background-color: black;
  float: left;
}

nav a {
  display: block;
  padding: 0;
  text-decoration: none;
  color: white;
  text-align: center;
} 

nav li:hover {
  margin-top: -10px;
  padding-bottom: 30px; 
}

img {
  width: 100%;
  margin: auto;   
}