main-nav.css

.mybox{width:40px;height:40px;background-color:tomato;position:relative}.mybox-container{position:relative}div#mainNav-container{font-family:Arial,Helvetica,sans-serif;letter-spacing:.1em;width:1024px;max-width:100%;box-sizing:border-box;transition:top .6s ease,left .6s ease,right .6s ease;position:relative;z-index:5000}@media (max-width:767px){div#mainNav-container{height:100%;width:270px;position:fixed;top:0}div#mainNav-container body,div#mainNav-container html{overflow:hidden}div#mainNav-container.mainNav-left{left:-270px}div#mainNav-container.mainNav-left.mainNav-open{left:0}div#mainNav-container.mainNav-left #mainNav-menu{height:100%}div#mainNav-container.mainNav-right{right:-270px}div#mainNav-container.mainNav-right.mainNav-open{right:0}div#mainNav-container.mainNav-right #mainNav-menu{height:100%}div#mainNav-container.mainNav-top{position:fixed;width:100%;overflow:hidden;max-height:0;transition:max-height .6s ease,padding-bottom .6s ease;padding-bottom:0}div#mainNav-container.mainNav-top.mainNav-open{max-height:1000px;padding-bottom:10px}div#mainNav-container.mainNav-top #mainNav-menu{padding-top:50px}div#mainNav-container.mainNav-top #mainNav-menu::after,div#mainNav-container.mainNav-top #mainNav-menu::before{display:table;content:" "}div#mainNav-container.mainNav-top #mainNav-menu::after{clear:both}div#mainNav-container.mainNav-top #mainNav-menu li{float:left;width:100%;border-right:none transparent;border-left:none transparent;border-bottom:1px solid #ccc}div#mainNav-container.mainNav-top #mainNav-menu li:first-child{border-top:1px solid #ccc}div#mainNav-container.mainNav-sticky .sticky-mainNav-container{height:100%!important}div#mainNav-container #mainNav-menu{overflow-y:auto;overflow-x:hidden}}@media (min-width:768px){div#mainNav-container{margin:30px auto 0}div#mainNav-container.mainNav-sticky{width:100%;max-width:100%;top:0;margin:0;position:fixed;background-color:transparent;-webkit-box-shadow:0 8px 5px -7px rgba(0,0,0,.7);-moz-box-shadow:0 8px 5px -7px rgba(0,0,0,.7);box-shadow:0 8px 5px -7px rgba(0,0,0,.7)}div#mainNav-container.mainNav-sticky .sticky-mainNav-container{width:1024px;max-width:100%;top:0;margin:0 auto}div#mainNav-container.mainNav-sticky .sticky-mainNav-container #mainNav-menu>li{float:left}div#mainNav-container.mainNav-sticky .sticky-mainNav-container #mainNav-menu>li:last-of-type{border-right:1px solid #fff}div#mainNav-container.mainNav-sticky .sticky-mainNav-container #mainNav-menu>li:first-of-type{border-left:1px solid #fff}}div#mainNav-container #mainNav-toggle{display:none}@media (max-width:767px){div#mainNav-container #mainNav-toggle{background-color:#f1f1f1;border:none transparent;border-radius:3px;display:block;width:30px;height:30px;position:fixed;top:10px;padding:2px;transition:left .6s ease,right .6s ease}div#mainNav-container #mainNav-toggle:hover{cursor:pointer;opacity:.7}div#mainNav-container #mainNav-toggle.mainNav-left{left:10px}div#mainNav-container #mainNav-toggle.mainNav-left.mainNav-open{left:calc(270px + 10px)}div#mainNav-container #mainNav-toggle.mainNav-right{right:10px}div#mainNav-container #mainNav-toggle.mainNav-right.mainNav-open{right:calc(270px + 10px)}div#mainNav-container #mainNav-toggle.mainNav-top{left:10px}div#mainNav-container #mainNav-toggle span{width:100%;height:2px;display:block;background-color:#ccc}div#mainNav-container #mainNav-toggle span:nth-of-type(1){margin-bottom:4px}div#mainNav-container #mainNav-toggle span:nth-of-type(3){margin-top:4px}}div#mainNav-container #mainNav-menu{width:100%;background-color:transparent;box-sizing:border-box}@media (max-width:767px){div#mainNav-container #mainNav-menu{background-color:#fff}}div#mainNav-container #mainNav-menu>li{box-sizing:border-box;background-color:transparent;padding:10px 20px}div#mainNav-container #mainNav-menu>li:hover{background-color:#000;border-bottom:1px solid #fff;cursor:pointer}div#mainNav-container #mainNav-menu>li:hover a{color:#fff}div#mainNav-container #mainNav-menu>li a{text-decoration:none;text-transform:uppercase;color:#333}div#mainNav-container #mainNav-menu>li a:hover{color:#fff}div#mainNav-container #mainNav-menu>li ul li{background-color:#000;font-size:14px}div#mainNav-container #mainNav-menu>li ul li a{text-transform:none}div#mainNav-container #mainNav-menu>li ul li:hover{background-color:#606060}div#mainNav-container #mainNav-menu>li ul li:hover a{color:#fff}div#mainNav-container #mainNav-menu>li ul li:after{border-left:8px solid #fff}@media (max-width:767px){div#mainNav-container #mainNav-menu>li{border-bottom:1px solid #000}div#mainNav-container #mainNav-menu>li.mainNav-dropdown-open{background-color:#000}div#mainNav-container #mainNav-menu>li.mainNav-dropdown-open a{color:#fff}div#mainNav-container #mainNav-menu>li.mainNav-dropdown-open>ul{display:block;position:relative;top:10px;width:calc(100% + 40px);margin:0 -20px}div#mainNav-container #mainNav-menu>li.mainNav-dropdown-open>ul>li{display:block;padding:10px 0 10px 40px;border-right:none transparent!important;border-bottom:1px solid #fff}div#mainNav-container #mainNav-menu>li.mainNav-dropdown-open>ul>li:first-of-type{border-top:1px solid #fff}#mainNav-menu div#mainNav-container #mainNav-menu>li.mainNav-dropdown-open>ul>li:last-of-type{border-bottom:none transparent}div#mainNav-container #mainNav-menu>li.mainNav-dropdown-open>ul>li.mainNav-dropdown-open ul{display:block;position:relative;top:10px;width:calc(100% + 40px);margin:0 -40px}div#mainNav-container #mainNav-menu>li.mainNav-dropdown-open>ul>li.mainNav-dropdown-open ul li{padding:10px 0 10px 60px;border-right:none transparent!important;border-bottom:1px solid #fff}div#mainNav-container #mainNav-menu>li.mainNav-dropdown-open>ul>li.mainNav-dropdown-open ul li:first-of-type{border-top:1px solid #fff}div#mainNav-container #mainNav-menu>li.mainNav-dropdown-open>ul>li.mainNav-dropdown-open ul li:last-of-type{border-bottom:none transparent}}@media (min-width:768px){div#mainNav-container #mainNav-menu>li:hover>ul{display:block;position:absolute;top:37px;width:150px;margin-left:-20px}div#mainNav-container #mainNav-menu>li:hover>ul>li{display:block;padding:10px 20px;width:150px;border-right:none transparent!important}div#mainNav-container #mainNav-menu>li:hover>ul>li:hover ul{display:block;position:absolute;height:36px!important;max-height:36px!important;left:100%;width:calc(100% + 40px);margin-top:-24px}div#mainNav-container #mainNav-menu>li:hover>ul>li:hover ul li{padding:10px 20px 9px;border-right:none transparent!important;border-bottom:1px solid #fff;border-top:1px solid transparent}div#mainNav-container #mainNav-menu>li:hover>ul>li:hover ul li:first-of-type{border-top:1px solid transparent}div#mainNav-container #mainNav-menu>li:hover>ul>li:hover ul li:last-of-type{border-bottom:none transparent}}@media (min-width:768px){div#mainNav-container #mainNav-menu.mainNav-horizontal::after,div#mainNav-container #mainNav-menu.mainNav-horizontal::before{display:table;content:" "}div#mainNav-container #mainNav-menu.mainNav-horizontal::after{clear:both}div#mainNav-container #mainNav-menu.mainNav-horizontal li{float:left}div#mainNav-container #mainNav-menu.mainNav-horizontal.mainNav-justified>li{display:table-cell;width:1%;text-align:center;float:none}}div#mainNav-container #mainNav-menu ul{display:none}div#mainNav-container #mainNav-menu .mainNav-dropdown{position:relative}div#mainNav-container #mainNav-menu .mainNav-dropdown::after{content:"";width:0;height:0;border-top:5px solid transparent;border-left:8px solid #333;border-bottom:5px solid transparent;position:absolute;right:7px;top:13px;color:#333}div#mainNav-container #mainNav-menu .mainNav-dropdown:hover{color:#fff}div#mainNav-container #mainNav-menu .mainNav-dropdown:hover::after{border-left:8px solid #fff}@media (min-width:768px){div#mainNav-container #mainNav-menu .mainNav-dropdown:hover::after{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}}div#mainNav-container #mainNav-menu .mainNav-dropdown.mainNav-dropdown-open::after{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}@media (max-width:767px){.push-mainNav-container{position:relative;transition:top .6s ease,left .6s ease,right .6s ease}.push-mainNav-container.mainNav-left{left:0}.push-mainNav-container.mainNav-left.push-mainNav-open{left:270px}.push-mainNav-container.mainNav-right{right:0}.push-mainNav-container.mainNav-right.push-mainNav-open{right:270px}}.clearfix::after,.clearfix::before{display:table;content:" "}.clearfix::after{clear:both}.container{width:1024px;max-width:100%;margin:0 auto}.container.mainNav-left,.container.mainNav-right{margin-top:50px}@media (min-width:768px){.container{margin-top:30px}}