*, *:after, *:before { /* box-sizing: border-box;*/ } .htmleaf-container{ margin:0px 0; width:100%;} .animenu__toggle { display: none; cursor: pointer; background-color: #111; border: 0; padding: 10px; height: 58px; width: 58px; } .animenu__toggle:hover { background-color: #066f44; } .animenu__toggle__bar { display: block; width: 20px; height: 2px; background-color: #fff; -webkit-transition: 0.15s cubic-bezier(0.75, -0.55, 0.25, 1.55); -o-transition: 0.15s cubic-bezier(0.75, -0.55, 0.25, 1.55); transition: 0.15s cubic-bezier(0.75, -0.55, 0.25, 1.55); } .animenu__toggle__bar + .animenu__toggle__bar { margin-top: 4px; } .animenu__toggle--active .animenu__toggle__bar { margin: 0; position: absolute; } .animenu__toggle--active .animenu__toggle__bar:nth-child(1) { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .animenu__toggle--active .animenu__toggle__bar:nth-child(2) { opacity: 0; } .animenu__toggle--active .animenu__toggle__bar:nth-child(3) { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .animenu { display: block; height: 58px; line-height: 58px; background: #17a66b; } .animenu ul { padding: 0; list-style: none; font: 0px ; z-index: 5555; } .animenu li, .animenu a { /*display: inline-block;*/ display: block; float: left; font-size: 15px; } .animenu a { color: #fff; text-decoration: none; } .animenu__nav { width: 1200px; margin: 0 auto; } .animenu__nav > li { position: relative; text-align: center; width: 133px; } .animenu__nav > li > a { width: 133px; text-align: center;font-size: 18px; font-weight: bold; text-transform: uppercase;height: 58px;line-height: 58px; } .animenu__nav > li > a:first-child:nth-last-child(2):before { content: ""; position: absolute; border: 4px solid transparent; border-bottom: 0; border-top-color: currentColor; top: 50%; margin-top: -2px; right: 30px; display: none; } .animenu__nav > li:hover > ul { opacity: 1; visibility: visible; margin: 0; } .animenu__nav > li:hover > a { color: #fff; width: 133px; height: 58spx; background: #066f44; } .animenu__nav__child { min-width: 100%; position: absolute; top: 100%; left: 0; z-index: 1; opacity: 0; visibility: hidden; margin: 20px 0 0 0; background-color: #066f44; transition: margin .15s, opacity .15s; } .animenu__nav__child > li { width: 100%; border-bottom: 1px solid #014b2e; } .animenu__nav__child > li:first-child > a:after { content: ''; position: absolute; height: 0; width: 0; left: 1em; top: -6px; border: 6px solid transparent; border-top: 0; border-bottom-color: inherit; } .animenu__nav__child > li:last-child { border: 0; } .animenu__nav__child a { padding: 10px; width:133px; background:#066f44; border-color: #066f44; /*三角颜色*/ color: #fff; padding: 0; line-height:42px; } .animenu__nav__child a:hover { background-color: #17a66b;/*三角颜色*/ border-color: #17a66b; color: #fff; } @media screen and (max-width: 767px) { .animenu__toggle { display: inline-block; } .animenu__nav, .animenu__nav__child { display: none; } .animenu__nav { margin: 10px 0; } .animenu__nav > li { width: 100%; border-right: 0; border-bottom: 1px solid #515151; } .animenu__nav > li:last-child { border: 0; } .animenu__nav > li:first-child > a:after { content: ''; position: absolute; height: 0; width: 0; left: 1em; top: -6px; border: 6px solid transparent; border-top: 0; border-bottom-color: inherit; } .animenu__nav > li > a { width: 100%; padding: 10px; border-color: #111; position: relative; } .animenu__nav a:hover { background-color: #0186ba; border-color: #0186ba; color: #fff; } .animenu__nav__child { position: static; background-color: #373737; margin: 0; transition: none; visibility: visible; opacity: 1; } .animenu__nav__child > li:first-child > a:after { content: none; } .animenu__nav__child a { padding-left: 20px; width: 100%; } } .animenu__nav--open { display: block !important; } .animenu__nav--open .animenu__nav__child { display: block; }