2015-07-19 95 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屬性的問題。