CSS - 摆脱透明盒子

Question

创建导航栏后，我发现它周围有一个透明的盒子，它有一些透明的功能。虽然它并不引人注目，但我仍然希望删除它。我附上了一张图片和CSS代码。我认为.menu标签正在创建透明框，但我不知道如何删除它。

/* Navigation */

.clearfix {
  width: 595px;
}

.clearfix:after {
  display: block;
  clear: both;
}

.menu-wrap {
  width: 80px;
  box-shadow: 0px 1px 3px rgba(0,0,0,0.2);
  position: absolute;
  top: 5.5%;
  left: 55%;
}

.menu {
  width: 100%;
  margin: 0px;
  right: 10px;
}

.menu li {
    margin: 0px;
    list-style: none;
    font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
}

.menu a {
    transition: all linear 0.15s;
    color: #ffffff;
}

.menu li:hover > a, .menu .current-item > a {
    text-decoration: none;
    color: #000000;
}

.menu .arrow {
    font-size: 11px;
    line-height: 0%;
}

/* Top Level */

.menu > ul > li {
    float: left;
    display: inline-block;
    position: relative;
    font-size: 1em;
}

.menu > ul > li > a {
    padding: 10px 30px;
    display: inline-block;
    text-decoration: none;
}

.menu > ul > li:hover > a, .menu > ul > .current-item > a {
    background: #ffffff;
}

/* Bottom Level */

.sub-menu {
    width: 140%;
    padding: 5px 0px;
    position: absolute;
    top: 100%;
    left: 0px;
    z-index: -1;
    opacity: 0;
    transition: opacity linear 0.15s;
    box-shadow: 0px 2px 3px rgba(0,0,0,0.2);
    background: #ffffff;
}

.menu li:hover .sub-menu {
    z-index: 1;
    opacity: 1;
}

.sub-menu li {
    display: block;
    font-size: 1em;
}

.sub-menu li a {
    padding: 10px 30px;
    display: block;
    color: #000000;
}

.sub-menu li a:hover, .sub-menu .current-item a {
    background: #e0e0e0;
}

Answer 1

我玩了一下并想出来，但如果我的答案不满意，其他任何人都可以随意发表评论。

问题实际上是由.menu-wrap标记引起的，我删除它所需要做的就是删除我添加到代码中的box-shadow: 0px 1px 3px rgba(0,0,0,0.2);属性。看来这个透明的盒子有box-shadow属性的问题。