CSS下拉菜单编辑

Question

我使用CSS和HTML创建了下拉菜单。 我只是不知道我在做什么错。当我将鼠标悬停在社交上时，它不会弹出我的下拉菜单。

整个小提琴这里

Js Fidle Example

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

#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

有优尔和<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 2

你需要把子UL李里

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

是针对悬停的内的UL元素编辑李

Answer 3

的<ul>包含的Facebook，YouTube上，Twitter的需要是社会<li>内。它适用于这种变化。