#verticalBar {
  position: relative;
  /*aplicamos estilos para crear la vertical bar*/
  -webkit-transform: rotateZ(90deg);
  -moz-transform: rotateZ(90deg);  /* FF3.5/3.6 */
  -o-transform: rotateZ(90deg);  /* Opera 10.5 */
  -webkit-transform: rotateZ(90deg);  /* Saf3.1+ */
  transform:rotateZ(90deg);  /* Newer browsers (incl IE9) */

  transform-origin: 0 100%;
  width: 401px;
  text-align: left;
  border: 4px solid #5095d3;
  background-color: #5b9bd5;
  color: white;
  padding-right: 10px;
  left:-26px;
  top:-30px;
  box-shadow:-2px 4px 5px 0px #444;
}

.rotate {
  /*la rotamos*/
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);  /* FF3.5/3.6 */
  -o-transform: rotate(180deg);  /* Opera 10.5 */
  -webkit-transform:rotate(180deg);  /* Saf3.1+ */
  transform:rotate(180deg);  /* Newer browsers (incl IE9) */
}

#verticalBar:hover{
  background-color: #1f4e79;
  border: 4px solid #214f7a;
}

#verticalBar:hover +#stdMenu {
  /*cuando hagamos mouseover por la vertical bar mostramos el menú*/
  display: block;
}

#stdMenu {
  /*apagamos el menu por defecto*/
  position: absolute;
  display: none;
  left:-20px;
  top:100px;
  z-index: 99;
}

#stdMenu:hover {
  display: block;
}
#stdMenu:hover + #verticalBar {
  background-color: #1f4e79;
  border: 4px solid #214f7a;
}

#stdMenu ol li:hover {
  /* posicionamos relativo al padre nivel 1*/
  position: relative;
}

#stdMenu ol {
  /*aplicamos estilo a todo el punto de menú*/
  top: -50px;
  counter-reset: item;
}

#stdMenu ol li {
  /*aplicamos estilo a puntos de item*/
  width: 450px;
  margin: 3px 0 0;
  border: 4px solid #5095d3;
  background-color: #5b9bd5;
  color: white;
  padding-left: 10px;
  list-style-type:decimal;
  list-style-position:inside;
  height:23px;
  padding-top: 1px;
  
}
#stdMenu li:before { 
	content: counters(item, ".") " "; 
	counter-increment: item ;
}
#stdMenu li{
	 display: block;
}

#stdMenu a {
  text-decoration: none;
  color: white;
  width:90%;
}

#stdMenu ol li ol {
  /* apagamos por defecto todas las sublistas*/
  display: none;
}

#stdMenu ol li:hover>ol {
  /* este mouse over aplica sobre el hijo a mostrar */
  display: block;
  /*mostramos estilo justificado*/
  position: absolute;
  /*con absolute evitamos que el menu nivel 1 se abra para dar cabida al nivel 2*/
  left: 427px;
  /*posicionamos a X px sobre su posicion inicial*/
  top: -7px !important;
  /* la subimos al mismo al mismo nivel que el padre*/
}

#stdMenu ol li:hover {
  /* este mouse over aplica sobre el mismo punto de menú*/
  background-color: #1f4e79;
  border: 4px solid #214f7a;
}

.hasChild:after {
  /*estilo para añadir un puntero en caso de tener sub menú*/
  content: "►";
  text-align: center;
  color: white;
      position: relative;
    top: -31px;
    left: 95%;
}
#submenu ol li {
	display:block;
    }
#submenu ol {
	counter-reset: item;
    }
#submenu ol > li {
	counter-increment: item; 
    position: relative;
  	}
#submenu ol ol > li:before {
	content:counters(item, ".") " "; 
    position: absolute; margin-right: 100%; 
    right: 10px;
    }
#stdMenu>ol>li .menuItemText {
    margin-left: 4%;
}
#stdMenu>ol>li>ol>li .menuItemText {
    margin-left: 7%;
}
#stdMenu .menuItemText{
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	width: 90%;
    position: relative;
    top: -16px;
}