Question

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

所以基本上我有一个带有 ul 和链接的导航。然后我在名为Log In的第一个链接中有另一个 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>

CSS

nav ul{
background:#1C1D21;
margin:0;
padding:0;
}

nav ul li{
display:inline-block;
color:white;
padding:10px 20px;
border-right:1px solid white;

}

 nav ul li a{
 color:white;
 text-decoration:none; 
 }

nav ul ul {
position:absolute;
border-top:1px solid red;
} 

 /*Where the problem seems to occur */

 nav ul ul li {
display:block; /*change to display to none */
}

/*The hovering part */ 

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

Answer 1

问题在于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>

Example

Answer 2

您想将子列表（子导航）放入主列表（主导航）

http://jsfiddle.net/doiks14/2FLMD/4/

您拥有的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>

另请注意，这是创建列表的语义正确方法。

Answer 3

将>更改为+，如下所示：

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

Demo.

请注意，ul（您想要展示）不是您悬停在li上的直接子项，它只是li的相邻兄弟，所以我们应该使用+代替>。

Answer 4

HTML标记有几处错误。这是quick fix

Answer 5

你的选择器没有正确形成，试试这个：

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

参考：http://jsfiddle.net/2FLMD/2/

菜单css3悬停在链接上

5 个答案:

Demo.