Html 带有图像的CSS下拉菜单-防止子项消失？

我创建了一个基于四幅图像的CSS下拉菜单。当我将鼠标悬停在第一个图标上时，其他三个图标显示为：hover on the first

，将其他三个图标的不透明度设置为1。然而，当我向下滚动到其他三个时，我无法实现其他三个仍然存在

这是CSS和HTML：

ul{
列表样式：无；
宽度：200px；
左侧填充：30px；
边际：0px；
边界：无；
浮动：左；
右边距：5px；
z指数：1；
位置：相对位置；
}
li#下拉列表{
高度：510px；
填充：0px；
边际：0px；
不透明度：0；
过渡：均为0.5s；
}
li：悬停+li#下拉列表{
不透明度：1；
/*显示下拉列表*/
}
li#下拉列表：悬停li#下拉列表{
不透明度：1；
/*显示下拉列表*/
}

大致如此：

<div class="menu_img_container">
  <img src="pic.jpg">
  <ul>
    <li><a href="#1">Item 1</a></li>
    <li><a href="#1">Item 2</a></li>
    <li><a href="#1">Item 3</a></li>
  </ul>
</div>

<style>
  .menu_img_container
  {
    display: inline;
    position: relative;
  }

  .menu_img_container ul
  {
    display: none;
    position: absolute;
    top: 50px;
    left: 0;
  }

  .menu_img_container:hover ul
  {
    display: block;
  }
</style>

.menu\u img\u容器
{
显示：内联；
位置：相对位置；
}
.menu\U img\U容器ul
{
显示：无；
位置：绝对位置；
顶部：50px；
左：0；
}
.menu\u img\u容器：悬停ul
{
显示：块；
}

您需要使用：

li:hover+li#dropdown，li#dropdown:hover

将悬停状态放置在下拉元素上

另外，这里有两个示例，可以防止鼠标悬停在下拉菜单下方时显示不需要的菜单

工作实例 #1-使用 最好的东西-过渡淡入和淡出

限制——如果您必须具有IE10及以下的支持，这是可能的。根据您的要求，这可能不是限制。这里有两个问题讨论了IE 10及以下版本的各种备选方案-和

指针事件：
ul上的none
阻止下拉菜单在不可见时激活。它在悬停时被取消，指针事件：自动

将鼠标悬停在图像上，然后将下面显示的图像悬停


ul{
列表样式：无；
宽度：200px；
左侧填充：30px；
边际：0px；
边界：无；
浮动：左；
右边距：5px；
z指数：1；
位置：相对位置；
指针事件：无；
}
li#下拉列表{
高度：510px；
填充：0px；
边际：0px；
不透明度：0；
过渡：均为0.5s；
位置：绝对位置；
}
李诺顿{
指针事件：自动；
}
li:悬停+li#下拉，li#下拉：悬停{
不透明度：1；
指针事件：自动；
/*显示下拉列表*/
}





您可以使用过渡来延长悬停效果

HTML

这应该可以做到，只需更新css的这三个部分

li#dropdown {
    height: 510px;
    padding: 0px;
    margin:0px;
    display:none;
transition: all 0.5s;
}



li:hover + li#dropdown {
    display: block; /* display the dropdown */
    }

li#dropdown:hover{
      display:block;
    } 

这有点棘手，因为你想有一个很好的不透明度过渡。只需
显示：无
就可以简单得多。但是，如果您使用
position:absolute
组合来隐藏项目，并使用不透明组合来进行转换，我们仍然可以使其与转换一起工作

移动
：将
选择器从
li
悬停到整个
ul

ul:hover>li#下拉列表{
不透明度：1；
顶部：自动；
}
li#下拉列表{
高度：510px；
填充：0px；
边际：0px；
不透明度：0；
过渡：均为0.5s；
位置：绝对；/*将项目移动到远离屏幕的位置*/
顶部：-1000px；
}

它应该会起作用。因此，我们的想法是，
#下拉菜单以绝对位置移动到屏幕外，这使得不可能将鼠标悬停在“不可见”项目上，因此它们不会出现在白色区域悬停上。但是，在第一个项目悬停时，您可以使用
top:auto
返回下拉列表，从而允许再次悬停。转换也会起作用。
这就是
：hover
应该做的，不是吗？是的，我不明白为什么它不能像我编程的那样工作。尝试了各种方法，也将：鼠标悬停在图像上而不是
，也不起作用。@AndrévanderHeijden检查我的答案，你可以用它hover@MisterManSam我同意你的解决方案，但是你的帖子现在被删除了？无论如何，非常感谢，man帮我省了几个小时的麻烦，也许还省了几个电脑显示器。谢谢你的帮助，但我想用不透明度来做这件事：0到1，因为过渡效果。也许可以试试，但这是一个快速解决办法。在IE中，不要忘记测试。可能会有问题。在这种情况下，在与“不透明度”相同的基础上，可以使用“可见性”。我这么做很容易，而且会奏效。但是没有很好的不透明度转换，我认为这在这种情况下很重要。现在它工作了，我在我的答案中所做的差不多，只是用translate移动下拉列表。就是这样，很好！谢谢，好吧，不错，我自己没想到。好功能@等等，
指针事件：无
是我的主意。但无论如何，我会使用
position:absolute来隐藏
@dsfq——老实说——我还没有看过任何其他答案，所以我想这仍然是一个原创的想法。
#a{
width:50px;
height:50px;
background-color:green;
transition:0s 100s;
}

#b{
width:200px; 
height:200px;
opacity:0;
transition:0s 100s;
}

#a:hover #b{
opacity:1;
transition:0s;
}

li#dropdown {
    height: 510px;
    padding: 0px;
    margin:0px;
    display:none;
transition: all 0.5s;
}



li:hover + li#dropdown {
    display: block; /* display the dropdown */
    }

li#dropdown:hover{
      display:block;
    }