html - 将鼠标悬停在 div 上以显示 ul 问题与 css

Question

我正在尝试创建一个 div，因此当您将鼠标悬停时，它会显示一个 ul，其中包含可点击的 li 链接。所以这是我的代码。

HTML:

<div class="return"><a href="#">Hover</a>
    <ul class="nav">
           <li><a href="http://google.com" target="_blank">Home</a></li>
    </ul>
</div>

CSS:

.return{margin-top: 10px; font-size: 25px; margin-left: 10px; background-color: red; width: 100px; height: 30px; position: absolute; text-align: center;} 
.return a{color: black;} 
.nav{font-size: 15px; position: absolute; list-style-type: none; margin-top: -25px; margin-left:100px; color: black;} 
.nav li{color: black; margin-left: 10px; margin-right: 10px; opacity:1;}
.return:hover + .nav li{opacity: 1;}

我创建了一个 JsFiddle Demo但是当我将鼠标悬停在返回上课时，隐藏的元素不会显示。有人可以帮忙吗？

Answer 1

这里不需要相邻的选择器 + 因为 .nav 是 .return div 的子元素:

.return:hover .nav li{opacity: 1;}