George Welder George Welder - 10 days ago 5
CSS Question

How to make div with image disappear behind Menu-Item?

I have a webpage with a div, this div contains an image. I also have a menu bar, which expands when hovered. The image should lie under the menu bar then, and not be visible while the expanded menu is 'above' it. However, it does not do that: The image clearly lies on top of the menu. How could I fix this and have the image disappear? Did I do something wrong in my CSS?

style.css:

body {
padding-right: 0;
margin-right: 0;
padding-left: 0;
margin-left: 0;

margin-top: 0;
}

.nav {
background-color: #F6F8FB;
position: relative;
display: inline-block;
width: 100%;
height: 80px;

/*overflow: hidden;*/
}

.nav li {
float: left;
padding: 1%;

font-family: AlegreyaSansSC-Light;
font-size: 14px;
color: #637F92;
letter-spacing: 0.52px;

height: 100%;
width: 126px;

margin-top: 0;
margin-left: 0;
margin-right: 0;
margin-bottom: 0;
}

.nav li:hover {
/*background-color: #0B619B;*/
/*opacity: 0.1;*/
/*color: #637F92;*/

background: rgb(221, 232, 241); /* Fallback for older browsers without RGBA-support */
background: rgba(221, 232, 241, 0.95);
}

.nav ul {
list-style: none; /*removes bullet points*/
}

.dropdown-content {
display: none;
position: absolute;
background-color: #F6F8FB;
min-width: 70px;
/*box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);*/
padding: 70px 126px;
opacity: 1;
}

.dropdown-content:hover {
background: rgb(221, 232, 241); /* Fallback for older browsers without RGBA-support */
background: rgba(221, 232, 241, 0.95);
}

.nav li:hover .dropdown-content {
display: block;
}

.logo-bar {
background-color: white;
height: 180px;
width: 100%;
}
.logo {
height: 63px;
width: 56px;

position: relative;
top: 25%;
left: 15%;
/*border: 3px solid #73AD21;*/
}


The html file

<div class="nav">
<ul>
<li>Wilkommen</li>
<li>Angebot
<ul class="dropdown-content">
<li>Test</li>
<li>Test</li>
</ul>
</li>
<li>Unternehmen
<ul class="dropdown-content">
<li>Hallo</li>
<li>Hallo2</li>
</ul>
</li>
<li>Anfahrt</li>
<li>Kontakt</li>
</ul>
</div>

<!-- LOGO BAR -->
<div class="logo-bar">
<div class="logo">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 63 56" style="enable-background:new 0 0 63 56;" xml:space="preserve">
<style type="text/css">
.st0{fill:#0D629C;stroke:#FFFFFF;stroke-width:0.3177;stroke-miterlimit:10;}
.st1{fill:#F2DE20;}
</style>
<g id="XMLID_3_">
<path id="XMLID_13_" class="st0" d="M29.6,44.8c5,3.6,7.4,8.8,0.9,9.9c-8.8,1.5-20.3-2.7-26.1-9.5c-4.3-5,1.2-7.4,7.5-6.9
C18.3,38.8,24.6,41.2,29.6,44.8z"/>

</g>
</svg>
</div>
</div>

Answer

Two things were wrong: your dropdown menu didn't have a z-index high enough to sit on top of the SVG, and your .dropdown-menu code had an RGBA background which was 95% opaque (meaning it was a little bit see through).

By changing around those two things, I believe this is the effect you wanted.

body {
  padding-right: 0;
  margin-right: 0;
  padding-left: 0;
  margin-left: 0;
  margin-top: 0;
}
.nav {
  background-color: #F6F8FB;
  position: relative;
  display: inline-block;
  width: 100%;
  height: 80px;
  /*overflow: hidden;*/
}
svg {
  z-index: -1
}
.nav li {
  float: left;
  padding: 1%;
  font-family: AlegreyaSansSC-Light;
  font-size: 14px;
  color: #637F92;
  letter-spacing: 0.52px;
  height: 100%;
  width: 126px;
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
}
.nav li:hover {
  /*background-color: #0B619B;*/
  /*opacity: 0.1;*/
  /*color: #637F92;*/
  background: rgb(221, 232, 241);
  /* Fallback for older browsers without RGBA-support */
  background: rgba(221, 232, 241, 0.95);
}
.nav ul {
  list-style: none;
  /*removes bullet points*/
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #F6F8FB;
  min-width: 70px;
  /*box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);*/
  padding: 70px 126px;
  opacity: 1;
  z-index: 100;
}
.dropdown-content:hover {
  background: rgb(221, 232, 241);
  /* Fallback for older browsers without RGBA-support */
  
}
.nav li:hover .dropdown-content {
  display: block;
}
.logo-bar {
  background-color: white;
  height: 180px;
  width: 100%;
}
.logo {
  height: 63px;
  width: 56px;
  position: relative;
  top: 25%;
  left: 15%;
  /*border: 3px solid #73AD21;*/
}
<div class="nav">
  <ul>
    <li>Wilkommen</li>
    <li>Angebot
      <ul class="dropdown-content">
        <li>Test</li>
        <li>Test</li>
      </ul>
    </li>
    <li>Unternehmen
      <ul class="dropdown-content">
        <li>Hallo</li>
        <li>Hallo2</li>
      </ul>
    </li>
    <li>Anfahrt</li>
    <li>Kontakt</li>
  </ul>
</div>

<!-- LOGO BAR -->
<div class="logo-bar">
  <div class="logo">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 63 56" style="enable-background:new 0 0 63 56;" xml:space="preserve">
      <style type="text/css">
        .st0 {
          fill: #0D629C;
          stroke: #FFFFFF;
          stroke-width: 0.3177;
          stroke-miterlimit: 10;
        }
        .st1 {
          fill: #F2DE20;
        }
      </style>
      <g id="XMLID_3_">
        <path id="XMLID_13_" class="st0" d="M29.6,44.8c5,3.6,7.4,8.8,0.9,9.9c-8.8,1.5-20.3-2.7-26.1-9.5c-4.3-5,1.2-7.4,7.5-6.9
    					C18.3,38.8,24.6,41.2,29.6,44.8z" />

      </g>
    </svg>
  </div>
</div>