ul#navbar{list-style-type:none}
ul#navbar li{display:block;width:180px;background:#76507e;border:1px solid #ffffff;border-left:4px solid #603369;}
ul#navbar li a{display:block;color:#fff;font-size:1.2em;padding:10.7px 0 10.7px 20px;text-decoration:none;transition:all .3s ease;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-o-transition:all .3s ease}
ul#navbar li a:hover{padding-left:30px;background:#a381aa}
ul#navbar>li>ul{display:none}

ul#navbar>li:hover>ul{position:absolute;display:block;left:192px;z-index: 10;}

ul#navbar>li:nth-child(1):hover>ul{top:0px;}
ul#navbar>li:nth-child(2):hover>ul{top:45px;}
ul#navbar>li:nth-child(3):hover>ul{top:90px;}
ul#navbar>li:nth-child(4):hover>ul{top:137px;}
ul#navbar>li:nth-child(5):hover>ul{top:180px;}
ul#navbar>li:nth-child(6):hover>ul{top:225px;}
ul#navbar>li:nth-child(7):hover>ul{top:272px;}
ul#navbar>li:nth-child(8):hover>ul{top:317px;}
ul#navbar>li:nth-child(9):hover>ul{top:364px;}
ul#navbar>li:nth-child(10):hover>ul{top:409px;}
ul#navbar>li:nth-child(11):hover>ul{top:454px;}
ul#navbar>li:nth-child(12):hover>ul{top:499px;}
ul#navbar>li:nth-child(13):hover>ul{top:546px;}

/*ul#navbar>li:nth-child(3):hover>ul>li{margin-left:-50px;background:#D50000;border:1px solid #4B4B4B;border-left:2px solid #76507e}
ul#navbar>li:nth-child(3):hover>ul>li>a:hover{padding-left:45px;background:#0AF;border-left:4px solid #808000}
ul#navbar>li:nth-child(3)>ul>li:first-child>a:hover{background:#0AF}
ul#navbar>li:nth-child(3)>ul>li:nth-child(2)>a:hover{background:#002AD5}
ul#navbar>li:nth-child(3)>ul>li:nth-child(3)>a:hover{background:#F74D22}
ul#navbar>li:nth-child(3)>ul>li:last-child>a:hover{background:#2222F7}*/

ul#navbar>li>ul>li>ul{display:none}
ul#navbar>li>ul>li:first-child:hover>ul{position:absolute;display:block;left:182px;top:0}
ul#navbar>li>ul>li:first-child>ul>li{margin-left:-50px;background:#00AA80;border:1px solid #4B4B4B;border-left:2px solid #76507e}
ul#navbar>li>ul>li:nth-child(2):hover>ul{position:absolute;display:block;left:182px;top:53px}
ul#navbar>li>ul>li:nth-child(2)>ul>li{margin-left:-50px;background:#D58000;border:1px solid #4B4B4B;border-left:2px solid #76507e}
ul#navbar>li>ul>li:nth-child(3):hover>ul{position:absolute;display:block;left:182px;top:107px}
ul#navbar>li>ul>li:nth-child(3)>ul>li{margin-left:-50px;background:#D50055;border:1px solid #4B4B4B;border-left:2px solid #76507e}
ul#navbar>li>ul>li>ul>li>a:hover{padding-left:50px;background:#00802B;border-left:4px solid #D50000}
ul#navbar>li>ul>li>ul>li:last-child:hover>a:hover{padding-left:30px;background:#00802B;border-left:4px solid #D50000}
ul#navbar>li>ul>li>ul>li>ul{display:none}
ul#navbar>li>ul>li>ul>li:last-child:hover>ul{background:red;position:absolute;display:block;left:182px;top:215px}
ul#navbar>li>ul>li>ul>li>ul>li{margin-left:-50px;background:#505;border:1px solid #4B4B4B;border-left:px solid #76507e}
ul#navbar>li>ul>li>ul>li:last-child:hover>ul>li>a:hover{padding-left:50px;background:#F50;border-left:4px solid #FF00D5}
#arrow{font-size:1em;margin-left:40px;animation:arrow 2s infinite ease;-webkit-animation:arrow 2s infinite ease;-moz-animation:arrow 2s infinite ease;-o-animation:arrow 2s infinite ease}
@keyframes arrow{0%{margin-left:40px}
50%{margin-left:30px}
100%{margin-left:40px}
}
@-webkit-keyframes arrow{0%{margin-left:40px}
50%{margin-left:30px}
100%{margin-left:40px}
}
@-moz-keyframes arrow{0%{margin-left:40px}
50%{margin-left:30px}
100%{margin-left:40px}
}
@-o-keyframes arrow{0%{margin-left:40px}
50%{margin-left:30px}
100%{margin-left:40px}
}
#det{position:absolute;top:0;left:500px;font-size:4em;text-shadow:2px 2px 10px #000}