If you like our Zcode top menu in this tutorial we are goring to learn you how to create it in few simple steps.

The first thing you have to do is create unsorted html list <ul> with menu class.

<ul class="menu">
  <li><a href="#">Web</a></li>
  <li><a href="#">Ui & Ux</a></li>
  <li><a href="#">Tutorials</a></li>
  <li><a href="#">School</a></li>
</ul>

.menu {
  width: auto;
  min-width: 1px;
  height: 40px;
  position: relative;
  list-style:none;
}

Css for menu have auto width, and I put height to be 40px, but you can change height as you want, but later in code you need to change height of tag <a> also.

.menu li{
  float:left;
}
.menu a {
  display: block;
  height: 40px;
  width: auto;
  padding: 0 20px 0 20px;
  line-height: 40px;
  text-decoration: none;
  margin 0;
  text-align: center;
  color: #373435;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  font-size: 14px;
  font-weight: 400;
  position:relative;
  transition: all 0.3s ease-in-out;
}

Tag <li> have css attribut float left, so that all menu elements are placed on the left side. For tag <a> I set ti to be block and to have 40px height and 0.3s transition with ease-in-out effect and to be relative. You can place the font as you desire. To get a different border for each menu element you need to separate css for each tag <a> as you can see on a example below.

.menu li:nth-child(1) a {
  border-bottom: 2px solid #1e88e5;
}

Next thing you need to define is a pseudo element of tag <a> that will serve as a hover effect. It is set to have absolute position, 0px height, to be at the bottom with z-index of -1 to be behind of the current element.

.menu a::before {
  content: "";
  height: 0;
  bottom: 0;
  width: 100%;
  left: 0;
  position: absolute;
  display: block;
  transition: all 0.3s ease-in-out;
  z-index: -1;
}

After that, just like we did a hover for <a> tag, we need to create hover for each pseudo element of tag <a> so that each element would have different colors. An example of an element is below.

.menu li:nth-child(1) a:hover::before {
  height: 40px;
  background-color: #1e88e5;
}

You can view the full functional code: