@charset "UTF-8";ul{list-style:none;padding:0;margin:0}ul li{display:inline-block;position:relative}li ul{display:none;position:absolute;left:0;top:100%;z-index:10;padding:0;margin:0}ul li a{display:block;padding:10px 15px;text-decoration:none;color:#fff}ul li a:hover{background:#3d3d3d}li:hover ul{display:block}li:hover li{float:none}li:hover a{background:#3d3d3d}li ul li a{background-color:#333;padding:10px 20px;color:#fff;width:180px}li ul li a:hover{background-color:#555}.arrow{margin-left:5px;font-size:.8em;transition:transform 0.3s ease}li:hover .arrow{transform:rotate(180deg)}@media (max-width:768px){ul li{display:block;margin-bottom:0}li ul{position:static;display:none}li:hover ul{display:block}ul li a{padding:5px 10px}li ul li a{padding:5px 10px}}@media screen and (min-width:1024px){ul{height:300px}}