trasparent div隐藏透明下拉菜单悬停
问题描述:
我有一个div在我的下拉菜单后面,当我使div透明(不透明属性)时,它出现在悬停下拉菜单的前面,这会导致下拉菜单消失时鼠标进入div的区域。但我想保持div透明。我试过设置z-index属性,但它没有帮助。trasparent div隐藏透明下拉菜单悬停
下面是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>