我怎样才能制作子菜单

Question

https://gncnext.com 这是网站，在菜单部分我还需要一个子菜单，服务>; Office 365 咨询 >子菜单我们做了后端部分，我们只需要CSS看起来像一个子菜单。我们尝试提供填充或边距，但当我们这样做时，它就消失了，它只表明当我们为其他子菜单提供更多宽度时。只有当我设置位置：固定时，才可以使其看起来像子菜单，但是当我这样做时，不可能与后端和数据库同步工作。

                        <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>
                        

这是 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;
}

这些是相关的类

Answer 1

#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);
}