css - 透明div在悬停时隐藏透明下拉菜单

Question

我的下拉菜单后面有一个 div，当我使 div 透明(不透明度属性)时，它会在悬停时出现在下拉菜单前面，这会导致当鼠标进入 div 区域时下拉菜单消失。但我想让那个 div 保持透明。我试过设置 z-index 属性，但没有用。

这是html代码(简化)

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

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

您可以在此处看到此行为:

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

Answer 1

首先，不要使用opacity...它会使内容也变得不透明。使用具有 alpha 值 (rgba) 的背景颜色。 See this question

然后你需要绝对定位子菜单(父li)有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>