JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<ul class="nav">
    <li><a href="/"><img alt="Home" src="http://www.clker.com/cliparts/O/v/c/b/i/6/generic-logo-hi.png"/></a></li>
    <li><a href="/">Action 1</a></li>
    <li><a href="/">Action 2</a></li>
    <li><a href="/">Logout</a></li>
</ul>

CSS

.nav{
    height: 50px;
    overflow: hidden;
}

.nav li{
    float: left;
}

.nav li a{
    height: 55px;
    border-bottom: 5px solid #6666CC;
    -moz-transition: all .15s ease-in;
    -o-transition: all .15s ease-in;
    -webkit-transition: all .15s ease-in;
    transition: all .15s ease-in;
}

.nav li a:hover{
    height: 50px;
}

.nav li a img{
    height: 25px;
}