2015-07-19 96 views
2

创建导航栏后,我发现了一个透明盒子,它有一些透明的特征。虽然它并不引人注目,但我仍然希望将其删除。我附上了一张图片和CSS代码。我认为.menu标记正在创建透明框,但我不知道如何删除它。CSS - 摆脱透明盒子

enter image description here

/* 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; 
} 

回答

1

我用了一点发挥各地,并理解了它,但如果我的回答是不尽如人意谁都可以随意评论。

这个问题实际上是由标签造成的,我必须做的所有删除操作都是删除我添加到代码中的box-shadow: 0px 1px 3px rgba(0,0,0,0.2);属性。看起来这个透明的盒子有box-shadow属性的问题。