菜单css3悬停在链接上

Question

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

JSfiddle： http : //jsfiddle.net/2FLMD/

所以基本上我有一个带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> 

的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结构中，因为您的sub 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>

例

Answer 2

您想要将子列表（sub nav）放在主列表（main nav）内

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;
}

演示

请注意， ul （您要显示）不是您悬停的li的直接子代，它只是该li的相邻兄弟，因此我们应使用+而不是> 。

Answer 4

您的HTML标记有几个错误。 这是一个quick fix

Answer 5

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

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

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