Ich habe ein div hinter meinem Dropdown-Menü, wenn ich das div transparent machen (Deckkraft-Eigenschaft), es kommt vor dem Dropdown-Menü auf Hover und dies bewirkt, dass das Dropdown-Menü zu verschwinden Die Maus betritt den Bereich des Div. aber ich möchte das div trasparent behalten. Ich habe versucht, Z-Index Eigenschaften zu setzen, aber es hilft nicht.trasparent Div versteckt transparent Dropdown-Menü auf Hover
hier ist der HTML-Code (vereinfachte)
<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>
und 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;
}
Sie dieses Verhalten hier sehen können:
https://jsfiddle.net/xsmael/mdthqdh4/4/