巨型菜单CSS问题

Question

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

我已经设置了css，一切都很好，除了最后一个菜单（附件和外围设备）？

有关详细信息，请查看Here

Idkw只有最后一个菜单有问题，可能是因为内容太多了？还是长篇文字？

我错在哪里？

谢谢你提前