<div class="menu" id="menu-header">
    
    <ul class="mobile-open mobile" onclick="if(this.classList.contains('active')){document.querySelector('#menu-header .menu-content').classList.remove('active'); this.classList.remove('active');} else { document.querySelector('#menu-header .menu-content').classList.add('active'); this.classList.add('active');}">
        <li></li>
        <li></li>
        <li></li>
    </ul>
    
    <div class="menu-content padding-30 border-box">
        <ul class="top-menu">
            <li class="menu-item active">
                <a>Home</a>
            </li>
            
            <li class="menu-item">
                <a>About us</a>
            </li>
            
            <li class="menu-item with-sub">
                <a>Services</a>
                <ul class="sub-menu">
                    <li class="sub-item with-sub">
                        <a>Service 1</a>
                        <ul class="sub-menu">
                            <li class="sub-item">
                                <a>Sub service 1</a>
                            </li>
                        </ul>
                    </li>
             
                </ul>
            </li>
            
            <li class="menu-item">
                <a>Contacts</a>
            </li>
         
        </ul>
    </div>
</div>


<div id="credit" class="text-right">
    <div>Created with <a href="https://web.imasmi.com/webcss" target="blank">WebCss</a></div>
    <div>Created with <a href="https://fontawesome.com/" target="blank">Font Awesome</a></div>
</div>

body{background-color: #666666;}

.menu .menu-content{margin: 10px 0; color: #ffffff;}
.menu-item{display: inline-block; position: relative;}
.menu-item:before{content: ""; display: block; position: absolute; right: 100%; top: 50%; width: 0; height: 2px; transform: translate(7px, -100%); background-color: #68a4ae; transition: 0.3s width;}
.menu-item.active:before, .menu-item:hover:before{width: 10px;}
.menu-item a{font-size: 16px; font-weight: bold; padding: 15px 20px; display: block;}
.with-sub .sub-menu{display: none;}
.with-sub:hover > .sub-menu{display: block; position: absolute; top: 100%; width: 250px; background-color: #c6dfe6;}
.with-sub .sub-menu .sub-item{display: block; position: relative; color: #000000;} 
.with-sub .sub-menu .sub-item a{padding: 10px; border: 5px solid #c6dfe6;}
.sub-item:before{content: ""; display: block; position: absolute; right: 100%; top: 50%; width: 0; height: 2px; transform: translate(10px, -100%); background-color: #013b49; transition: 0.3s width;}
.sub-item.active:before, .sub-item:hover:before{width: 10px;}
.with-sub .sub-menu > .sub-item:hover{background-color: #ffffff;}
.with-sub .sub-menu .sub-menu{top: 0; left: 100%;}

.mobile-open{position: fixed; top: 20px; left: 10%; transition: 0.5s left;-webkit-tap-highlight-color: transparent;}
.mobile-open.active{left: 85%;}
.mobile-open li{width: 40px; height: 2px; margin: 10px 0; background-color: #ffffff; transition: 0.5s transform; list-style-type: none;}
.mobile-open.active li:first-child{transform: rotate(45deg) translateX(8px);}
.mobile-open.active li:nth-child(2){display: none;}
.mobile-open.active li:last-child{transform: rotate(-45deg) translateX(8px);}

#credit{margin: 50px 50px 0 0; float: right;}
#credit a{color: #97b5d0; text-decoration: none;}

@media (max-width: 1080px){
    #menu-header .menu-content{ position: fixed; z-index: 3; height: 100%; width: 80%; background-color: #ffffff; top: 0; left: -80%; color: #000000; transition: 0.5s left; margin: 0;}
    #menu-header .menu-content.active{left: 0; }
    .menu-item{    display: block; text-align: center;  border-bottom: 1px solid #555;}
    .menu-item.active:before, .menu-item:hover:before{display: none;}
    .menu-item.active{background-color: #68a4ae; color: #ffffff; border-bottom: none;}
    .with-sub:after{content: "+"; display: block; position: absolute; right: 0; top: 0; padding: 15px; transition: 0.3s transform;}
    .with-sub.sub-active:after{transform: rotate(45deg);}
    .with-sub:hover > .sub-menu{width: auto; background: none; position: relative; display: block;}
    .with-sub .sub-menu{display: block; max-height: 0; overflow: hidden;  transition: 0.3s;}
    .with-sub.sub-active > .sub-menu{ max-height: 100px;}
    .with-sub .sub-menu .sub-item a{    padding: 15px; border: none; border-top: 1px solid #ffffff;}
    .with-sub .sub-menu .sub-menu{left: 0;}
    .sub-item:before{display: none;}
}

    if(window.innerWidth < 1081){
        var subs = document.querySelectorAll(".with-sub");
        for(let i = 0; i < subs.length; ++i){
            subs[i].addEventListener("click", function(event){
                event.stopPropagation();
                el = event.target;
                if(el.classList.contains("sub-active")){
                    el.classList.remove("sub-active");
                } else {
                    el.classList.add("sub-active")
                }
            });
        }
    }