HTML:
CSS:
.nav ul li{
float:left;
margin-right:10px;
}
.nav ul li a{
z-index:9999;
position: relative;
display:block;
color:#BDBDBD;
font-size:14px;
letter-spacing:.7px;
padding:15px 12px;
}
.nav ul li a:after{
z-index:-1;
content:"";
position:absolute;
width:100%;
height:0%;
bottom:0;
left:0;
background-color: red;
transition:height 150ms;
}
.nav ul li a:hover{
color:#fff;
}
.login ul li a:hover:after{
height: 100%;
}
nav ul {
width:100%;
top:0;
position:fixed;
margin:0;
padding:5px;
background-color:rgba(21,21,21,.65);
height:70px;
}
nav ul li:not(.image){
float:right;
list-style-type:none;
margin:15px 10px 10px 10px;
padding:12.5px;
height:25px;
color:white;
font-size:14px;
font-family: Circular,Helvetica,Arial,sans-serif;
}
nav ul li a {
color:white;
text-decoration:none;
}
nav ul li a.login {
color:rgb(220,220,220);
}
nav ul li:first-child {
float:left;
}
nav ul li.rightend {
margin-right:50px;
}
nav ul li img {
height:40px;
margin:17.5px;
margin-left:75px;
}
nav ul li a {
cursor:pointer;
transition-duration:250ms
}
nav ul li a:hover {
transition-duration:250ms;
color:#1e60d7;
}
nav ul li a div.list-border {
cursor:default;
width:1px;
height:25px;
background-color:white;
margin-top:-5px;
}