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

我正在尝试创建一个div，因此当您将其悬停时，它会显示一个包含可点击的li链接的ul。这是我的代码。
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，但是当我将鼠标悬停在类返回上时，隐藏的项目将不会显示。有人可以帮忙吗？

最佳答案

您不需要此处的相邻选择器+，因为.nav是.return div的子代：

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