Question

I cannot get the drop down aspect of this menu to show- I’m sure this is an easy fix- I just do not see it. The menu itself is nothing fancy, no sub-menu- just simple drop options are needed. I have checked out several tutorials and they are all different, so if I can get help in adjusting the work I have already done this would be the best scenario. Thanks for any help in advance!

#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

I think you meant to write

#headernav li:hover ul {

instead of #headernav li hover:ul {

Also you should probably add something like top: 60px; to this class.