Creating twitter desktop style header navigation

Twitter navigation is one of my favorite navigation styles. So I have tried replicating the same navigation, which seems good and tested with the browsers Chrome, firefox and Microsoft Edge.



Please note that I have developed this navigation bar only for desktop versions. So, If you are looking for mobile version of the twitter menu, you might want to look at fullpage navigation bar style which I have coded earlier.

This tutorial used CSS from another one how to place any element vertically center

1. HTML for horizontal navigation bar

<div class="header-navigation">
    <div class="navigation">
        <span class="nav-item v-center"><a href="/one">Featured</a></span>
         <span class="nav-item v-center"><a href="/two">News</a></span>
         <span class="nav-item v-center"><a href="/three">Sports</a></span>
         <span class="nav-item v-center"><a href="/for">Music</a></span>
         <span class="nav-item v-center"><a href="/five">Entertainment</a></span>
    </div>
</div>

2. CSS for the twitter style navigation bar

.header-navigation {
  
    background-color:#fff;
    font-family:'Arial';
    border:1px solid #e1e8ed;
    border-bottom:1px solid #e1e8ed;
}

.navigation {
    width:900px;
    margin-left:auto;
    margin-right:auto;
    font-size:20px;
    height:60px;
}
.navigation .nav-item {
    float:left;
}

.navigation .nav-item a {
    padding:20px 40px 19px 40px;
    text-decoration:none;
    color:#55acee;
    border-right:1px solid #e1e8ed;
    transition: box-shadow 100ms ease;
 }
.navigation .nav-item:last-child a{
    border-right:none;
}
.navigation .nav-item a:hover {
   box-shadow: 0 -15px 0 -10px #55acee inset;
 }
.v-center {
    text-align:center;
    position:relative;
    top:50%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
}

If you find any compatibility issue, please let me know and will try to fix it :-)