html - 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 属性有问题。