.sf-menu li { position: relative; } .sf-menu ul { position: absolute; z-index: 999 !important; display: inline-block; top: 110%; left: 0; box-shadow: -5px 5px 25px rgba(0,0,0,.3); background: #fff; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .sf-menu ul ul { top: 10px; left: 100%; z-index: 15 !important; } .sf-menu ul li { display: block; white-space: nowrap; -webkit-transition: background .2s; transition: background .2s; border-top: 1px solid #e5e5e5; } .sf-menu ul li:first-child { border-top: none; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; } .sf-menu ul li:last-child { -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; } .sf-menu ul li:hover, .sf-menu ul li.sfHover { background: #4caf46; -webkit-transition: none; transition: none; } .sf-menu ul ul li { z-index: 15 !important; } .sf-menu ul li a { display: inline-block; box-sizing: border-box; width: 100%; padding: 6px 40px 6px 20px !important; text-decoration: none; font-size: 1rem; font-weight: normal !important; } .sf-arrows a.sf-with-ul { padding-right: 2.5em; padding-right: 1em; } .sf-arrows ul a.sf-with-ul:after { font-family: FontAwesome; content: "\f0a9"; position: absolute; top: 5px; right: 10px; color: #4caf46; font-size: 20px; } .sf-arrows ul a.sf-with-ul:active:after, .sf-arrows ul a.sf-with-ul:hover:after, .sf-arrows ul a.sf-with-ul:focus:after { color: #fff; } /* .sf-menu ul li.active > a:before { font-family: FontAwesome; content: "\f0a9"; position: absolute; top: 10px; left: 8px; color: #e5e5e5; font-size: 20px; } */ .sf-menu ul li.active { background-color: #4caf46 !important; } .sf-menu ul li.active a.sf-with-ul:after { color: #fff; } .sf-menu ul li > a:active, .sf-menu ul li > a:hover, .sf-menu ul li > a:focus, .sf-menu ul li.active > a { color: #fff !important; }