Mega Menu CSS Issues - html

Question

This is Structure HTML :
<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
<div class="sub-child">
<li>DEKSTOP</a></li>
//looping FOR SUB-MENU DEKSTOP
<li><a>DEKSTOP ASUS</a></li>
<li><a>DEKSTOP DELL</a></li>
//
</div>
//
</ul>
</div>
</li>
//
</ul>
</div>
CSS:
#menu {
position: relative;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu > ul > li {
float: left;
z-index: 20;
}
#menu > ul > li:hover {}
#menu > ul > li > a {
text-decoration: none;
display: block;
z-index: 6;
}
#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: 100%; //REMOVE THIS <<==
}
#menu > ul > li:hover > div {
display: table;
}
#menu > ul > li > div > ul {
display: table-cell;
}
#menu > ul > li > div > ul > div > li a {
display: block;
white-space: nowrap;
min-width: 110px;
}
.sub-menu > ul > .sub-child {
width: 25%;
float: left;
display: block;
}
#menu > ul > li > .sub-menu > ul > .sub-child > li:first-child a {
font-size: 1.2em;
color: #8dc63f;
}
.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 0 0;
border-right: none;
margin: 5px 0 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 div ul div li a {
font-weight: normal;
}
I already set css and everything is fine except last menu (Accessories and Peripheral)?
For more details, Please check Here
Idkw only the last menu have problem, maybe because too much content? or text to long?
Where I did mistake?
Thanks Advance