Change Width Mega Menu CSS

Question

I tried change from Drop-Down Menu to Mega Menu.

Structure :

<div id="menu" class="col-md-12 menu-inner menu-nav">
    <ul class="nav-effect">
        //looping for HEAD-MENU => Computer
        <li>
            <a>COMPUTER</a>
            <div class="sub-menu">  
                <ul>
                    // looping sub-menu computer => dekstop
                    <li>
                        <ul>
                            <li>DEKSTOP</a></li>
                            //looping FOR SUB-MENU DEKSTOP
                            <li><a>DEKSTOP ASUS</a></li>
                            <li><a>DEKSTOP DELL</a></li>
                            //
                        </ul>
                    </li>
                    //
                </ul>
            </div>
        </li>
    </ul>
</div>

CSS:

.menu-inner {
    background:#26348b;
    margin: 20px 0 15px;
    padding:0!important;
    height: 33px;
}
.menu-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.menu-nav ul li {
    border-right: 1px solid #fff;
    padding: 7px 59px 3px;
}
.menu-nav ul li li {
    padding: 5px 20px 0 0;
    border-right: none;
    margin: 0 30px 2px 15px;
}
.menu-nav ul li:last-child {border-right: none}
.menu-nav ul li a {
    color: #fff;
    position: relative;
}
.menu-nav ul li a:hover {
    text-decoration: none;
}

.nav-effect li a {
    padding: 0 0 5px;
}

.nav-effect li > a::after {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 1px;
    background: #f6a328;
    content: '';
    opacity: 0;
    -webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s;
    -moz-transition: height 0.3s, opacity 0.3s, -moz-transform 0.3s;
    transition: height 0.3s, opacity 0.3s, transform 0.3s;
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    transform: translateY(-10px);
}

.nav-effect li > a:hover::after,
.nav-effect li > a:focus::after {
    height: 3px;
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    transform: translateY(0px);
}

ul.nav-effect li ul li a {
    font-weight: normal;
}

ul.nav-effect li ul li div ul li a {
    font-weight: normal;
}

#menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#menu > ul > li {
    position: relative;
    float: left;
    z-index: 20;

}
#menu > ul > li:hover {
}
#menu > ul > li > a {
    text-decoration: none;
    display: block;
    z-index: 6;
    position: relative;
}

#menu > ul > li > div {
    display: none;
    background: #26348b;
    position: absolute;
    z-index: 5;
    padding: 0 10px;
    margin-top: 3px;
    left: 0;
    border-top:1px solid #fff;
    width: 1170px;              //HERE   <<==
}
#menu > ul > li:hover > div {
    display: table;
}
#menu > ul > li > div > ul {
    display: table-cell;
}
#menu > ul > li ul + ul {
    padding-left: 20px;
}
#menu > ul > li ul > li > ul > li a {
    display: inline-block;
    white-space: nowrap;
    min-width: 110px;
}

.sub-menu > ul > li {
    width:20%;
    float:left;
    display:block;
}
#menu > ul > li > .sub-menu > li ul li:first-child a {
    font-size: 1.2em;
    color: #8dc63f;
}

It's work fine if I set width:1170px; (for sub-menu computer) but for some reason I can't do that.

I already try using width:100%, set padding or margin (each sub-menu had different sub-menu).

how to make it the same as before (like mega-menu)??

JSFiddle (Try remove width:1170px and minimize space javascript to see the menu in full)

Thanks Advance.

Answer 1

Set position:relative to #menu and don't give position:relative to .nav-effect > li, then set width:100%: to .sub-menu.

https://jsfiddle.net/epehcvhv/4/