<style>
.container{
margin: 0px auto;
width: 1000px;
height:500px;
background: #827f80;
}
.slidemenu{
list-style: none;
}
.slidemenu li a{
color: #FFF;
text-decoration: none;
font-family: Arial,sans-serif;
font-size: 16px;
font-weight: bold;
line-height: 35px;
margin-left: 20px;
}
.slidemenu li{
margin-bottom: 2px;
}
.slidemenu li.one{
width: 8px;
height: 30px;
background: #28a33c;
transition:all 0.5s ease;
}
.slidemenu li.two{
width: 8px;
height: 30px;
background: #d00338;
transition:all 0.5s ease;
}
.slidemenu li.three{
width: 8px;
height: 30px;
background: #703cb7;
transition:all 0.5s ease;
}
.slidemenu li.four{
width: 8px;
height: 30px;
background: #1d8ea4;
transition:all 0.5s ease;
}
.slidemenu li.five{
width: 8px;
height: 30px;
background: #667513;
transition:all 0.5s ease;
}
.slidemenu li.six{
width: 8px;
height: 30px;
background: #ac2692;
transition:all 0.5s ease;
}
.slidemenu li.seven{
width: 8px;
height: 30px;
background: #b3b3c5;
transition:all 0.5s ease;
}
.slidemenu li:hover{
transition:all 0.5s ease;
width: 200px;
}
</style>
<div class="container">
<ul class="slidemenu">
<li class="one"><a href="">Home</a></li>
<li class="two"><a href="">Profile</a></li>
<li class="three"><a href="">Services</a></li>
<li class="four"><a href="">Gallery</a></li>
<li class="five"><a href="">Notifications</a></li>
<li class="six"><a href="">Contact</a></li>
<li class="seven"><a href="">About</a></li>
</ul>
</div>
