trasparent div hiding transparent dropdown menu on hover

Question

i have a div behind my dropdown menu, when i make the div transparent(opacity property), it comes in front of the dropdown menu on hover and this causes the dropdown menu to disappear when the mouse enters the div's area. but i want to keep that div trasparent. i've tried setting z-index properties but it doesn't help.

here is the html code (simplified)

<div id="div1">
  <ul>

    <li><a href="#">PROUCT</a>
      <ul>
        <li><a href="#">Product 1 </a></li>
        <li><a href="#">Product 2</a></li>
        <li><a href="#">Product 3</a></li>
        <li><a href="#">Product 4</a></li>
        <li><a href="#">Product 5</a></li>
        <li><a href="#">Product 6</a></li>
        <li><a href="#">Product 7</a></li>
      </ul>
    </li>

  </ul>

  <div id="buying_form">
    <h2> please fill your buying form</h2></div>

</div>

and css:

ul {
margin: 0px;
  padding: 0px;
}

ul li {
  background-color: black;
  border: 1px solid white;
  width: 330px;
  height: 30px;
  line-height: 30px;
  float: left;
  text-align: center;
  list-style: none;
  opacity: .8;
  z-index: 1px;
}

ul li a {
  color: white;
  text-decoration: none;
  display: block;
}

ul li a:hover {
  background-color: ORANGE;
}

ul li ul li {
  display: none;
}

ul li:hover ul li {
  display: block;
  cursor: default;
}

#div1 {
  width: 200px;
  height: 650px;
  background: url(bgi2.jpg);
  text-align: center;
}

#buying_form {
  float: left;
  margin-left: 4px;
  margin-top: 100px;
  width: 326px;
  height: 442px;
  color: MEDIUMBLUE;
  border: 1px solid gray;
  background-color: #708090;
  opacity: .5;
}

You can see this behavior here:

https://jsfiddle.net/xsmael/mdthqdh4/4/

score 3 · Answer 1 · edited May 23 '17 at 10:28

Firstly, Don't use opacity...it will make the contents have opacity too. Use a background color with alpha value (rgba). See this question

Then you need to position the submenu absolutely (with the parent li) having position:relative;

ul {
  margin: 0px;
  padding: 0px;
}
ul li {
  background-color: rgba(0, 0, 0, 0.8);
  border: 1px solid white;
  width: 330px;
  height: 30px;
  line-height: 30px;
  float: left;
  text-align: center;
  list-style: none;
  position: relative;
}
ul li a {
  color: white;
  text-decoration: none;
  display: block;
}
ul li a:hover {
  background-color: ORANGE;
}
ul li ul {
  position: absolute;
  display: none;
}
ul li:hover ul {
  display: block;
  cursor: default;
}
#div1 {
  width: 200px;
  height: 650px;
  background: url(bgi2.jpg);
  text-align: center;
}
#buying_form {
  float: left;
  margin-left: 4px;
  margin-top: 100px;
  width: 326px;
  height: 442px;
  color: MEDIUMBLUE;
  border: 1px solid gray;
  background-color: rgba(0, 0, 255, 0.25);
}
body {
  background: lightgreen;
}

<div id="div1">
  <ul>
    <li><a href="#">PROUCT</a>
      <ul>
        <li><a href="#">Product 1 </a>
        </li>
        <li><a href="#">Product 2</a>
        </li>
        <li><a href="#">Product 3</a>
        </li>
        <li><a href="#">Product 4</a>
        </li>
        <li><a href="#">Product 5</a>
        </li>
        <li><a href="#">Product 6</a>
        </li>
        <li><a href="#">Product 7</a>
        </li>
      </ul>
    </li>
  </ul>

  <div id="buying_form">
    <h2> please fill your buying form</h2>
  </div>

</div>

trasparent div hiding transparent dropdown menu on hover

1 Answers1