html - 下拉菜单不显示

Question

我无法显示此菜单的下拉部分 - 我确信这是一个简单的修复 - 我只是看不到它。菜单本身没什么特别的，没有子菜单——只需要简单的下拉选项。我已经检查了几个教程，它们都是不同的，所以如果我能在调整我已经完成的工作方面得到帮助，这将是最好的方案。提前感谢您的帮助!

#headernav {
    float: right;
    width: 555px;
    padding: 0px;
    text-align:center;
    margin:0;
    list-style-type:none;

}

#headernav li {
    float:left;
}

#headernav li a {
    display: block;
    text-decoration: none;
    width:6em;
    height:35px;
    text-decoration:none;
    color:#161616;
    background:url(../images/linkbg2.png);
    background-repeat:no-repeat;
    padding:0.2em 0.6em;
    padding-top:20px;
    margin-left:3px;
    font-size:14px;
    letter-spacing:1px;
    font-weight:500;
}


#headernav li a:hover {
    text-decoration: none;
    height:35px;
    color: #161616;
    position: relative;
    width: 6em;
    text-align: center;
    padding:0.2em 0.6em;
    display: inline;
    float:left;
    padding-top:20px;
    margin-left:3px;
    cursor:pointer;
}

#headernav li ul {
    display:none;
}

#headernav li hover:ul {
    display:block;
    position:absolute;
    width:150px;
    background:#03C;
    list-style:none;
}

#headernav ul li {
  float: none;
}

#headernav ul li a {
  display: block;
  border-top: 1px solid #666;
}

HTML:

<ul id="headernav">
<li><a href="donate.html">Donate</a></li>
<li><a href="answers.html">Answers</a></li>
<li><a style="width:8.5em;" href="news.html">News & Events</a></li>

<li><a href="about.html">About Us</a>
<ul>
      <li><a href="mission.html">Mission</a></li>
</ul>
</li>

<li><a href="contact.html">Contact</a></li>
</ul>

Answer 1

我想你是想写

#headernav li:hover ul {

而不是 #headernav li hover:ul {

此外，您可能应该向此类添加类似 top: 60px; 的内容。