Question

我使用CSS和HTML创建了下拉菜单。我无法弄清楚我做错了什么。当我将鼠标悬停在Social上时，它不会弹出下拉菜单。

这里整个小提琴

我认为错误的代码的一部分。

   #nav ul li a:hover {
    color: #ccc;
    text-decoration: none;
}
#nav ul li:hover ul{
    display : block; 
}
#nav ul ul {
    display: none;
    position : absolute ;
    background-color: #333;
    border: 5px solid #222;
    border-top : 0;
    margin-left: -5px;        
}

Answer 1

您需要将子UL放在li

中

<li><a href="#"> Social</a>
    <ul>
         <li> Facebook</li>
         <li> Twitter </li>
         <li> Youtube </li>
    </ul>
</li>

见fidde：http://jsfiddle.net/2j55uthz/1/

原因是因为在你的CSS中这一行：

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

目标是悬停的li

中的内的UL元素

Answer 2

你有<li><a href="#"> Social</a></li>，它应该是

<li><a href="#"> Social</a>
                <ul>
                  <li> Facebook</li>
                  <li> Twitter </li>
                  <li> Youtube </li>
                </ul>
             </li>

JSFIDDLE

Answer 3

包含facebook，youtube，twitter的<ul>需要在社交<li>内。它适用于这种变化。

CSS下拉菜单编辑

3 个答案: