Html 仅当鼠标悬停在li类css上时显示ul类

我目前正在研究开发一个只支持CSS的下拉菜单。这个想法是当鼠标悬停在ul标签上时，它会使另一个ul类出现

下面是我目前拥有的代码

HTML

这个想法是，当鼠标悬停在li class=topMenu上时，ul class=子菜单id=home应该出现在下面

理想情况下，这应该只采用CSS格式，而不需要任何javascript等

---

谢谢你能提供的帮助

它需要一些调整：

<ul class="nav">
    <li class="topMenu"><a href="#">Home</a></li>
    <li class="subMenu">
    <ul id="home">
        <li><a href="#">Hello</a></li>
        <li><a href="#">World</a></li>      
    </ul>
    </li>
</ul>


.topMenu:hover + .subMenu
{
    display: block;
    background-color: blue;
}

---

它需要一些调整：

<ul class="nav">
    <li class="topMenu"><a href="#">Home</a></li>
    <li class="subMenu">
    <ul id="home">
        <li><a href="#">Hello</a></li>
        <li><a href="#">World</a></li>      
    </ul>
    </li>
</ul>


.topMenu:hover + .subMenu
{
    display: block;
    background-color: blue;
}

---

您真正需要做的就是在元素中嵌套

---

预览：

您真正需要做的就是在元素中嵌套

---

预览：

您还需要什么来完成此问题？您还需要什么来完成此问题？

<ul class="nav">
    <li class="topMenu"><a href="#">Home</a></li>
    <li class="subMenu">
    <ul id="home">
        <li><a href="#">Hello</a></li>
        <li><a href="#">World</a></li>      
    </ul>
    </li>
</ul>


.topMenu:hover + .subMenu
{
    display: block;
    background-color: blue;
}

<nav>
    <ul>
        <li><a href="#">Link</a></li>
        <li>
            <a href="#">Link</a>
            <ul>
                <li><a href="#">Submenu</a></li>
                <li><a href="#">Submenu</a></li>
            </ul>
        </li>
        <li><a href="#">Link</a></li>
    </ul>
</nav>

/* Resets */
nav a { 
    text-decoration: none;
    font: 12px/1 Verdana;
    color: #000;
    display: block; }
nav a:hover { text-decoration: underline; }
nav ul { 
    list-style: none;
    margin: 0;
    padding: 0; }
nav ul li { margin: 0; padding: 0; }

/* Top-level menu */
nav > ul > li { 
    float: left;
    position: relative; }
nav > ul > li > a { 
    padding: 10px 30px;
    border-left: 1px solid #000;
    display: block;}
nav > ul > li:first-child { margin: 0; }
nav > ul > li:first-child a { border: 0; }

/* Dropdown Menu */
nav ul li ul { 
    position: absolute;
    background: #ccc;
    width: 100%; 
    margin: 0;
    padding: 0;
    display: none; }
nav ul li ul li { 
    text-align: center;
    width: 100%; }
nav ul li ul a { padding: 10px 0; }
nav ul li:hover ul { display: block; }