CODEWITHSUNDEEP
htmlcss
Shrey
Shrey

Reputation: 532

CSS – Getting rid of transparent box

After creating a navigation bar, I discovered a transparent box around it, which has some transparent features. Though it's not strikingly noticeable, I would still like to remove it. I've attached an image and the CSS code. I think the .menu tag is creating the transparent box, but I don't know how to remove it.

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

Upvotes: 2

Views: 269

Answers (1)

Shrey
Shrey

Reputation: 532

I played around with it a little and figured it out, but anyone else can feel free to comment if my answer isn't satisfactory.

The problem was actually caused by the .menu-wrap tag, and all I had to do to remove it was remove the box-shadow: 0px 1px 3px rgba(0,0,0,0.2); attribute I added to the code. It seems this transparent box had problems with the box-shadow property.

Upvotes: 1

Related Questions