2
創建導航欄後,我發現了一個透明盒子,它有一些透明的特徵。雖然它並不引人注目,但我仍然希望將其刪除。我附上了一張圖片和CSS代碼。我認爲.menu
標記正在創建透明框,但我不知道如何刪除它。CSS - 擺脫透明盒子
/* 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;
}