Css 悬停时trasparent div隐藏透明下拉菜单

我的下拉菜单后面有一个div，当我使div透明（不透明属性）时，它在悬停时出现在下拉菜单前面，这会导致鼠标进入div区域时下拉菜单消失。但我想保持潜水舱的安全。我尝试过设置z索引属性，但没有帮助

下面是html代码（简化）

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

---

首先，不要使用

不透明度

…这会使内容也有不透明度。使用带有alpha值（rgba）的背景色

然后您需要绝对定位子菜单（父菜单

li

）具有

position:relative

ul{
边际：0px；
填充：0px；
}
ulli{
背景色：rgba（0,0,0,0.8）；
边框：1px纯白；
宽度：330px；
高度：30px；
线高：30px；
浮动：左；
文本对齐：居中；
列表样式：无；
位置：相对位置；
}
ullia{
颜色：白色；
文字装饰：无；
显示：块；
}
悬停{
背景颜色：橙色；
}
ul li ul{
位置：绝对位置；
显示：无；
}
ul-li：悬停ul{
显示：块；
游标：默认值；
}
#第一组{
宽度：200px；
高度：650px；
背景：url（bgi2.jpg）；
文本对齐：居中；
}
#购买表格{
浮动：左；
左边距：4倍；
边缘顶部：100px；
宽度：326px；
身高：442px；
颜色：中蓝色；
边框：1px纯色灰色；
背景色：rgba（0,0,255,0.25）；
}
身体{
背景：浅绿色；
}

请填写您的购买表格

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

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