我的下拉菜单后面有一个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;
}
您可以在此处看到此行为:
最佳答案
首先,不要使用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>
关于css - 透明 div 悬停时隐藏透明下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38919788/