我正在显示菜单悬停在图像上。这些动态生成的图像。 鼠标悬停在第一个图像菜单上时会显示,但菜单项背景项显示有问题。如何在隐藏盘旋的同时隐藏behide elemets?
a {
text-decoration: none;
}
.menu {
font-family: Arial;
color: #515151;
height: 40px;
position: relative;
text-align: left;
width: 15px;
margin: 0 auto;
}
.menu li a {
color: #515151;
display: block;
cursor: pointer;
font-size: 14px;
padding: 6px 15px;
}
.menu li a:hover {
background: #f44141;
color: #fff;
}
.sub {
background: #fff;
position: absolute;
z-index: 2;
width: 200px;
border-radius: 3px;
box-shadow: 0 2px 4px #ddd;
border: 1px solid #ddd;
display: none;
padding: 40px 0 3px;
}
a.hover-link {
width: 190px;
background: #fff;
font-size: 14px;
color: #515151;
position: absolute;
z-index: 110;
display: block;
height: 8px;
cursor: pointer;
border-radius: 5px 5px 0 0;
font-weight: 700;
border: 1px solid #ddd;
padding: 10px 0 1px 10px;
}
.sub-options {
list-style: none;
font-size: 11px;
margin: 0;
padding: 0;
}
答案 0 :(得分:0)
Working example:这只是z-index问题CSS:
.sub{
background: #fff;
position: absolute;
z-index: 1000;
width: 200px;
margin: 0px 0 3px;
border-radius: 3px;
box-shadow: 0 2px 4px #ddd;
border: 1px solid #ddd;
display: none; top:38px; left:0;
}