Demo - css-vertical-menu-bar

Edit This Code :
<html>
<head>
<style>
body{
    font-family: sans-serif;
}

ul.menu-navigation {
  font-size: 1.2em;
  float: left;
  width: 250px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #e25454;
  border-bottom: 1px solid #BF4E4E;
  border-top: 1px solid #BF4E4E;
}

ul.menu-navigation li a {
  display: block;
  color: #fff;
  text-decoration: none;
  width: 205px;
  padding: 10px 10px 10px 35px;
  border-top: 1px solid #BF4E4E;
  border-bottom: 1px solid #BF4E4E;
}

ul.menu-navigation li span {
  display: none;
}

ul.menu-navigation li a:hover {
  background-color: #BF4E4E;
  border-top: 1px solid #BF4E4E;
}

ul.menu-navigation li a:hover span {
  display: block;
  font-size: 0.8em;
  padding: 10px 0;
}

</style>
</head>
<body>
<ul class="menu-navigation">
  <li>
    <a href="#"># jQuery
  <span>Lorem Ipsum es texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el.
 </span>
  </a>
  </li>
  <li>
    <a href="#"># Angular JS
  <span>Persona que se dedica a la impren desconocido usó una galería de textos y los mezcló de tal manera que. </span>
  </a>
  </li>

  <li>
    <a href="#"># MS SQL
  <span>Documentos quedando esencialmente igual ás recientemente con software de autoedición, como por ejemplo. </span>
  </a>
  </li>
  <li>
    <a href="#"># JavaScript
  <span>Creaciónesencialmente igual ás recientemente con software de autoedición, como por ejemplo. </span>
  </a>
  </li>
  <li>
    <a href="#"># Asp.net MVC
  <span>Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, </span>
  </a>
  </li>
</ul>
</body>
</html>
Result :