Html 菜单css3悬停在链接上

我试图通过将鼠标悬停在链接上来创建我的第一个菜单，但当我将鼠标悬停时，第一个ul中的ul没有显示

JSfiddle：

所以基本上我有一个导航，里面有一个ul和链接。然后，在第一个名为登录的链接中，我有另一个ul。在第二个ul内有两个链路，每个链路内有一个输入元素

HTML

<nav>
    <ul>
        <li><a href="#">LOG IN</a></li>
            <ul>
                <li>Username: &nbsp;<input type="text" name="username">              </li>
                <li>Password: &nbsp;<input type="password" name="password"></li>

            </ul>
        <li><a href="#">SIGN UP</a></li> 
        <li><a href="#">CUSTOMER SERVICE</a></li> 
        <li><a href="#">SPECIALS</a></li> 
        <input type="search" name="search"> 
    </ul>
</nav> 

---

您的选择器格式不正确，请尝试以下操作：

 nav ul:hover ul li{
  display:block;
}

---

ref:

您的选择器格式不正确，请尝试以下操作：

 nav ul:hover ul li{
  display:block;
}

---

ref:

问题在于html结构中，因为子

ul

不包含在

li

中，并且作为

li

元素的同级元素存在：

<li><a href="#">LOG IN</a>
    <ul>
        <li>Username: &nbsp;<input type="text" name="username"></li>
        <li>Password: &nbsp;<input type="password" name="password"></li>
    </ul>
</li>

用户名：
密码：

---

问题在于html结构中，因为子

ul

不包含在

li

中，并且作为

li

元素的同级元素存在：

<li><a href="#">LOG IN</a>
    <ul>
        <li>Username: &nbsp;<input type="text" name="username"></li>
        <li>Password: &nbsp;<input type="password" name="password"></li>
    </ul>
</li>

用户名：
密码：

---

将

更改为

+

，如下所示：

nav ul li:hover + ul li{
   display:block;
}

---

请注意，

ul

（您要显示）不是您悬停的

li

的直接子项，它只是该

li

的相邻兄弟，因此我们应该使用

+

而不是

将
更改为
+
，如下所示：

nav ul li:hover + ul li{
   display:block;
}

请注意，
ul
（您要显示）不是您悬停的
li
的直接子项，它只是该
li
的相邻兄弟，因此我们应该使用
+
而不是
，您要将子列表（子导航）放入主列表（主导航）中


您拥有的选择器
nav ul li:hover>ul li
表示
nav ul li
具有
ul li

我只是简单地改变了标记，以反映您正在尝试做的事情

<li>
    <a href="#">LOG IN</a>
    <ul>
        <li>Username: &nbsp;<input type="text" name="username"></li>
        <li>Password: &nbsp;<input type="password" name="password"></li>
    </ul>
</li>



用户名：
密码：



还要注意，这是创建列表的语义正确的方法。
您希望将子列表（子导航）放在主列表（主导航）中


您拥有的选择器
nav ul li:hover>ul li
表示
nav ul li
具有
ul li

我只是简单地改变了标记，以反映您正在尝试做的事情

<li>
    <a href="#">LOG IN</a>
    <ul>
        <li>Username: &nbsp;<input type="text" name="username"></li>
        <li>Password: &nbsp;<input type="password" name="password"></li>
    </ul>
</li>



用户名：
密码：



还要注意，这是创建列表的语义正确的方法。
您的HTML标记上有几个错误。这是一个
您的HTML标记上有几个错误。这是一个
谢谢你的回答，以指出我的错误！所有答案都很好，但我选择了这一个，因为更正HTML语法可以让我停留在第二个ul上。谢谢你的答案指出我的错误！所有答案都很好，但我选择了这一个，因为更正HTML语法可以让我在第二个问题上悬停。