/* 导航栏蓝色下划线 开始*/ .nav-menu>ul>li>a:hover, .nav-menu>ul>li>a:focus, .nav-menu>ul>li.active>a { background: transparent; color: #6b97f8; } @media only screen and (min-width: 768px){ .nav-menu>ul>li>a:hover:after, .nav-menu>ul>li.active>a:after { width: 100%; } } .drop-down { position: relative; } .drop-down>a:before { font-family: 'FontAwesome'; content: "\f054"; font-size: 6px; margin-left: 6px; margin-top: 2px; float: right; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); -webkit-transition: 0.2s transform; transition: 0.2s transform; } .dropdown { position: absolute; right: -50%; top: 0; background-color: #6b97f8; width: 200px; -webkit-box-shadow: 0px 5px 5px -5px rgba(53, 64, 82, 0.2); box-shadow: 0px 5px 5px -5px rgba(53, 64, 82, 0.2); -webkit-transform: translateY(15px) translateX(50%); -ms-transform: translateY(15px) translateX(50%); transform: translateY(15px) translateX(50%); opacity: 0; visibility: hidden; -webkit-transition: 0.2s all; transition: 0.2s all; } .nav-menu>.drop-down>.dropdown { top: 100%; right: 50%; } .nav-menu>.drop-down>.dropdown .dropdown.dropdown-left { right: 150%; } .dropdown li a { display: block; color: #FFF; border-top: 1px solid rgba(250, 250, 250, 0.1); padding: 10px 0px; } .dropdown li:nth-child(1) a { border-top: none; } .drop-down:hover>.dropdown { opacity: 1; visibility: visible; -webkit-transform: translateY(0px) translateX(50%); -ms-transform: translateY(0px) translateX(50%); transform: translateY(0px) translateX(50%); } .drop-down:hover>a:before { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } /* 导航栏蓝色下划线 结束 */