Whenever I hover over the individual links, I notice that the color change doesn't extend all the way up. I have a feeling there is a more efficient way to achieve this than my current approach. Any assistance would be greatly appreciated!
HTML:
<ul class="nav nav-blue">
<li><a href="" class="nav-hdr">Nigel Silva</a></li>
<li><a href="" class="el-b-1">Home</a></li>
<li><a href="" class="el-b-2">About</a></li>
<li><a href="" class="el-b-3">Work</a></li>
<li><a href="" class="el-b-4">Clients</a></li>
<li><a href="" class="el-b-5">Contact</a></li>
</ul>
CSS:
.nav-hdr {
color: #FFF;
font-size: 1.5em;
position: relative;
left: -27%;
top: 5%;
}
.nav{
list-style:none;
margin:0 auto;
padding:0;
text-align:right;
text-decoration: none;
height: 55px;
}
.nav li{
display:inline;
}
.nav a{
display:inline-block;
padding-right:15px;
color: #000;
margin-top: auto;
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
transition-duration: 0.2s;
}
.nav a:hover, .nav a:focus {
color: #FFF;
}
.nav-blue {
background-color: #00aeef;
margin: auto;
width: 50%;
}
.nav-blue a {
color: #FFF;
}
.el-b-1:hover, .el-b-1:focus, .el-b-2:hover, .el-b-2:focus, .el-b-3:hover, .el-b-3:focus,
.el-b-4:hover, .el-b-4:focus, .el-b-5:hover, .el-b-5:focus {
background-color: #47cdff;
margin-top: 8.5px;
margin-bottom: 8.5px;
}
.el-b-1:active, .el-b-2:active, .el-b-3:active, .el-b-4:active, .el-b-5:active {
background-color: #0b8aba;
}