Html CSS：如何将鼠标悬停在一个元素上，然后显示另一个元素？

我有一个导航面板，当您将鼠标悬停在装置上时，它会在从主导航面板下拉的面板中显示前5个左右的装置

我正试图通过CSS和

：hover

实现这一点。 这是我试图获取的

：hover

示例：

HTML:

谢谢你的回答

你是这个意思吗

html:

编辑：

它仍然不能像你想要的那样工作。。。你必须使

成为
的子对象。你是说这个吗


html:

编辑：

它仍然不能像你想要的那样工作。。。您必须使
成为
的子对象。您可以使用css“inherit”值来实现这一点。查看本文和其中的演示：
您可以使用css“继承”值来完成此操作。查看本文和其中的演示：
如果使用javascript，效果会更好。这会比较容易。我认为CSS没有这样的选项。不要使用相同的id。你能在你的示例代码中添加子菜单的html吗？你应该使用toggle/toggleclassit，如果你使用javascript会更好。这会比较容易。我认为CSS没有这样的选项。不要使用相同的id。你能在你的示例代码中添加子菜单的html吗？你应该使用toggle/toggleclass
<div id="nav">
    <ul id="menu">                
        <li><a class="home" href="#">Home</a></li>
        <li><a class="fixtures" href="#">Fixtures</a></li>
        <li><a class="hidden" href="#">Manchester City</a></li>             
    </ul>
</div>

#nav li a.fixtures:hover{
        color: #000;
        margin-top:1px;
    -webkit-transition-duration: 0.4s;
    cursor: pointer;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    box-shadow: 0px 0px 20px rgba(0,235,255,0.8);
    -webkit-box-shadow: 0px 0px 20px rgba(255,102,51,0.8);
    background: rgba(255,102,51,0.8);
    opacity: 50%;
}
#nav li a.hidden{
     margin-top: 50px;
     padding: 100px;
     background-color: #fff;
     display: none;
}
#nav li a.fixtures:hover #nav li a.hidden{
    display: block;
}

<div id="nav">
    <ul id="menu">                
        <li class="home"><a href="#">Home</a></li>
        <li class="fixtures"><a href="#">Fixtures</a></li>
        <li class="hidden"><a href="#">Manchester City</a></li>             
    </ul>
</div>

#nav li.fixtures:hover{
        color: #000;
        margin-top:1px;
    -webkit-transition-duration: 0.4s;
    cursor: pointer;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    box-shadow: 0px 0px 20px rgba(0,235,255,0.8);
    -webkit-box-shadow: 0px 0px 20px rgba(255,102,51,0.8);
    background: rgba(255,102,51,0.8);
    opacity: 50%;
}
li.hidden{
     margin-top: 50px;
     padding: 100px;
     background-color: #fff;
     display: none;
}

li.fixtures:hover +  li.hidden{
    display: block;
}