trasparent div隠れ透明なドロップダウンメニューをホバーに表示

Question

私はdivを透明な（不透明なプロパティ）にすると、ドロップダウンメニューの背後にあるdivを持っています。これはホバー上のドロップダウンメニューの前に来ます。マウスがdivの領域に入ります。しかし、私はそのdivをtrasparentにしておきたい。私はZインデックスのプロパティを設定しようとしましたが、それは役に立ちません。

ここでは、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を使用してください...それは内容も不透明にするでしょう。アルファ値（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>