A Pen by Leandro Ribeiro Ruel.

index.html

<header class="top">
    <nav>
      <ul class="navigation">       
        <li class="active"><a href="#">home</a></li>
        <li><a href="#">delivery</a></li>
        <li>
          <a href="#">products</a>
          <ul>
            <li><a href="#">pizzas</a></li>
            <li><a href="#">esfihas</a></li>
          </ul>
        </li>
        <li><a href="#">contact</a></li>
      </ul>
    </nav>
</header>
<main>
  <div class="container">
    <h1>welcome to tomato's pizzaria</h1>
    <hr />
  </div>
</main>

script.js

//welcome to Tomato's Pizzaria

Simple-navbar-pizzaria.markdown

Simple navbar pizzaria

A Pen by Leandro Ribeiro Ruel on CodePen.

License.

style.css

@import url(http://fonts.googleapis.com/css?family=Josefin+Sans);

@import url(http://fonts.googleapis.com/css?family=Inder|Great+Vibes);

/* reset */
* {
  list-style: none;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

ul {
  padding: 0;
  margin: 0;
}

h1 {
  font-family: 'great vibes';
  font-size: 5em;
  padding: 0;
  color: #24662A;
  text-align: center;
}

.container {
  width: 940px;
  margin: 0 auto;
}

.container:after {
  clear: both;
}

/* header */
header {
  width: 100%;
  height: 300px;
  background: url(http://i.imgur.com/4IqSNio.jpg) no-repeat 50% 30%;
  background-size: 100%;
  margin-bottom: 20px;
  animation: background linear 12s alternate 1s infinite;
}

/*nav*/
nav {  
  position: relative;
  top: 20px;  
}

nav ul.navigation {
  text-align: center;
  width: 80%;
  height: auto;
  background: #d82028;
  border-radius: 4px;
  box-shadow: 0 3px 0 0 #9e1d02;
  margin: 0 auto ;
}

nav ul.navigation li {
  display: inline-block;
}
nav ul.navigation li.active {
  background: #b02028;
  color: #f7f7f7;
}

nav ul.navigation li a {
  text-decoration: none;
  font-family: "josefin sans";
  font-size: 20px;
  color: #fff;
  text-transform: uppercase;
  padding: 20px;
  line-height: 72px;/* center vertically*/
}

nav ul.navigation li:hover > a {
  background: #b02028;
  color: #f7f7f7;
}

nav ul.navigation li:hover > ul {
  display: block; /* show the menu when hover */
}

nav ul.navigation li > ul {
  display: none; /* hide menu */
  padding: 0;
  margin: 0;
  position: absolute;
  background: #b02028;
  height: auto;
  border: 0;
}

nav ul.navigation li > ul li {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  position: relative;
}

nav ul.navigation li > ul li a {
  padding: 15px 60px;
  font-size: 15px;
}

nav ul.navigation li:hover > ul li a:hover {
  background: #7f171d;
}


/* start a animation */
@keyframes background {
  from {
    background: url(http://i.imgur.com/4IqSNio.jpg) no-repeat 50% 30%;
    background-size: 100%;
    transition: all 0.5s;
  }
  to {
    background: url(http://i.imgur.com/PtuuVyo.jpg) no-repeat 50% 60%;
    background-size: 100%;
    transition: all 0.5s;
  }
}