菜单 css3 悬停在链接上答案

【问题标题】：menu css3 hovering over links菜单 css3 悬停在链接上
【发布时间】：2014-06-02 02:20:53
【问题描述】：

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

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

【问题讨论】：

标签： html css

【解决方案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

【讨论】：

感谢您指出我的错误的答案！所有答案都很棒，但我选择了这个，因为更正 HTML 语法允许我将鼠标悬停在第二个 ul 上。

【解决方案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>

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

【讨论】：

【解决方案3】：

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

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

Demo.

注意ul（你想显示）不是你悬停的li的直接子代，它只是li的相邻兄弟，所以我们应该使用+而不是>.

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

您的选择器格式不正确，试试这个：

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

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

【讨论】：