ul {        
     list-style: none;
     float: left;
	z-index: 1;	
}

ul > li {
     margin: 0;
     padding: 0px;
     font-size: 18px;
     font-family:  Helvetica;
     font-weight: 500;
     float: left; 
     position: relative;
     height: 8px;
     z-index: 1;
}

ul > li > a {
     padding: 12px; 
     align: center;
     top: 20px;
     color: #444;
     text-decoration: none; z-index: 1;
}

     ul > li > a:hover, 
     ul > li:hover > a {
     color: #689ED4;
     text-decoration: underline;
}

ul > li ul {
     padding: 0;
     position: absolute; 
     visibility: hidden;
     left: -20px; 
     top: 43px; 
     width: 220px; 
     text-align: left;
     background-color: #fcfcfc;
     border: 1px solid #ccc;
     transform: scaleY(0); /* zwijamy cały element */
     -webkit-transform: scaleY(0);
     transform-origin: 50% 0; /* ustawiamy punkt zwijania względem środka górnej krawędzi */
     -webkit-transform-origin: 50% 0;
     transition: 200ms; /* wydłużamy wykonywanie stylów */
}

ul li:hover > ul {
     visibility: visible;
     transform: scaleY(1); /* rozwijamy element do całej jego wysokości */
     -webkit-transform: scaleY(1);
}

ul > li ul ul {
     left: 221px; 
     top: -1px;
}

ul > li ul li {
     font-family: Helvetica;
     font-weight: 400;
     font-size: 13px;     
     margin: 0; 
     padding: 0;
     position: relative; 
     float: none; 
     height: 30px;
}

ul > li ul li a {
     padding: 7px 20px; 
     color: #505050; 
     text-decoration: none;
     display: block;
}

ul > li ul li a:hover,
ul > li ul li:hover > a {
     text-decoration: none;
     color: #fff;
     background-color: #074A8C;
}