Html CSS下拉菜单编辑

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

整个小提琴都在这里

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

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

---

您需要将sub UL放入li中

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

目标是悬停li中的UL元素，并且应该是

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

脸谱网
推特
Youtube

---

包含facebook、youtube、twitter的

必须在社交

中。它与这种变化相适应。
非常感谢，我花了20分钟用CSS搜索问题。
<li><a href="#"> Social</a>
                <ul>
                  <li> Facebook</li>
                  <li> Twitter </li>
                  <li> Youtube </li>
                </ul>
             </li>