How can i make submenu-CodePudding

https://gncnext.com this is the website, in menu section i need one more submenu , Services > Office 365 Consulting > Submenu we did backend part, we only need css looks like a submenu. We tried to give padding or margin but when we does that it dissaper, it only shows that when we give more width to other submenu. İt is only possible to make look like a submenu when ı make position:fixed but when i do that isnt possible to work synchronized with backend and database.

                        <ul id="mainmenu">
                            <li><a href="/">Home</a></li>
                            <li><a href="/about">About</a></li>
                            <li><a href="#">Services</a>
                               
                                <ul>
                                    @foreach($services->sortBy('sort') as $service)
                                        <li>
                                            <a href="/services/{!!$service->seo_url!!}">{!!$service->title!!}</a>
                                            
                                            

                                            @if($service->id == $service->id)
                                                <ul> 
                                                    @foreach($subservices as $sub_service)
                                                        @if($sub_service->services_id == $service->id)
                                                            <li><a href="/services/subservices/{!!$sub_service->seo_url!!}">{!!$sub_service->name!!}</a></li>
                                                        @endif
                                                    @endforeach
                                                </ul>
                                            @endif

                                        
                                        </li>
                                    @endforeach
                               
                                </ul>
                            </li>
                            <li><a href="/news">News</a></li>
                            <li><a href="/price">Pricing</a></li>
                            <li><a href="/references">References</a></li>

                            <li><a href="/contact">Contact</a></li>
                            

                        </ul>

This is the html

#mainmenu {
    font-family: "Lexend";
    font-size: 14px;
    margin: 0 auto;
    float: none;
}

#mainmenu ul {
    margin: 0px 0px;
    padding: 0px;
    height: 30px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    overflow: hidden;
    background: #ffffff;
    -webkit-box-shadow: 2px 2px 30px 0px rgba(20, 20, 20, 0.1);
    -moz-box-shadow: 2px 2px 30px 0px rgba(20, 20, 20, 0.1);
    box-shadow: 2px 2px 30px 0px rgba(20, 20, 20, 0.1);
}

#mainmenu li {
    margin: 0px 0px;
    padding: 0px 0px;
    float: left;
    display: inline;
    list-style: none;
    position: relative;
}

#mainmenu>li {
    letter-spacing: 1px;
    font-weight: 500;
}

#mainmenu>li.menu-item-has-children>a {
        position: relative;
        padding-right: 15px;
}

#mainmenu>li.menu-item-has-children>a:after {
    content: "\f107";
    font-family: "FontAwesome";
    display: inline-block;
    position: absolute;
    right: 0;
    color: rgba(255, 255, 255, .5);
}

header.smaller.scroll-light #mainmenu>li.menu-item-has-children>a:after {
    color: rgba(0, 0, 0, .6);
}

#mainmenu a {
    position: relative;
    display: inline-block;
    padding: 30px 18px;
    text-decoration: none;
    color: #fff;
    text-align: center;
    outline: none;
}

#mainmenu a span {
    position: relative;
    width: 0%;
    color: #ffffff;
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    line-height: 14px;
    border-bottom: solid 1px #ffffff;
}

#mainmenu li:hover a span {
    width: 100%;
}

#mainmenu li li a span {
    float: right;
    margin-top: 5px;
}

#mainmenu a.active span {
    width: 100%;
    margin-left: 0%;
}

.header-light #mainmenu>li>a {
    color: #222;
    font-weight: 600;
}

#mainmenu li li {
    font-size: 14px;
}

#mainmenu li li:last-child {
    border-bottom: none;
}

#mainmenu li li a {
    padding: 5px 15px;
    border-top: none;
    color: #111111;
    width: 100%;
    border-left: none;
    text-align: left;
    font-weight: normal;
    border-bottom: solid 1px rgba(255, 255, 255, .1);
}

.rtl #mainmenu li li a {
    text-align: right;
}

#mainmenu li li a:hover {
    color: #111;
}

#mainmenu li li a:after {
    content: none;
}

#mainmenu li li li a {
    padding: 2px 15px 2px 15px;
    background: #171A21;
}

#mainmenu li li a:hover,
#mainmenu ul li:hover>a {
    color: #fff;
    background: #1a8b49;
}






#mainmenu li ul {
    width: 310px;
    height: auto;
    position: absolute;
    left: 0px;
    margin-left: 0px;
    z-index: 10;
    visibility: hidden;
    opacity: 0;
}




                            
#mainmenu li ul li ul{
    width: 310px;
    height: auto;
    position: absolute;
    left:150px;
    
    z-index: 10;
    visibility: hidden;
   
    opacity: 0;
}

#mainmenu li ul li ul a{
    
    height: 40px;
    
}
#mainmenu li ul li:hover>ul{
    visibility: visible;
    opacity: 1;
}





#mainmenu li li {
    font-size: 12px;
    display: block;
    float: none;
    text-transform: none;
}

#mainmenu li:hover>ul {
    visibility: visible;
    opacity: 1;
    margin-top: 0px;
}

#mainmenu li ul ul {
    left: 100%;
    top: 0px;
}

#mainmenu li ul ul li a {
    background: #ffffff;
}

#mainmenu li:hover>ul {
    color: #1a8b49;
}

#mainmenu select {
    padding: 10px;
    height: 36px;
    font-size: 14px;
    border: none;
    background: #ff4200;
    color: #eceff3;
}

#mainmenu select option {
    padding: 10px;
}

#mainmenu .btn-type {
    padding: 0;
    margin: 0;
}

#mainmenu .btn-type a {
    background: #eee;
    padding: 0;
    margin: 0;
}

#mainmenu>li ul.mega {
    position: fixed;
    left: 0;
    height: 0%;
    width: 100%;
    visibility: hidden;
    opacity: 0;
    overflow: hidden;
    padding-left: 40px;
    padding-right: 40px;
}

#mainmenu li:hover ul.mega {
    visibility: visible;
    opacity: 1;
}

#mainmenu li ul.mega>li,
#mainmenu li ul.mega>li a {
    width: 100%;
}

#mainmenu li ul.mega li.title {
    padding: 0px 10px 15px 10px;
    text-align: left;
    color: #fff;
    font-weight: bold;
}

#mainmenu li ul.mega>li ul {
    position: static;
    visibility: visible;
    opacity: 1;
    left: 0;
    float: none;
    width: 100%;
}

#mainmenu ul.mega>li ul li {
    margin: 0;
    padding: 0;
}

#mainmenu ul.mega>li ul li:last-child {
    border-bottom: solid 1px #333333;
}

#mainmenu li ul.mega .menu-content {
    background: #171A21;
    padding: 30px;
}

header.header-mobile #mainmenu>li ul.mega {
    visibility: visible;
    opacity: 1;
}

header:not(.header-mobile) #mainmenu>li:hover ul.mega {
    height: auto;
}

these are the related classes

CodePudding user response：

#mainmenu ul {
    margin: 0px 0px;
    padding: 0px;
    height: 30px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    **//remove - overflow: hidden;**
    background: #ffffff;
    -webkit-box-shadow: 2px 2px 30px 0px rgba(20, 20, 20, 0.1);
    -moz-box-shadow: 2px 2px 30px 0px rgba(20, 20, 20, 0.1);
    box-shadow: 2px 2px 30px 0px rgba(20, 20, 20, 0.1);
}