0

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

#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>
4

2 回答 2

0

我想你是想写

#headernav li:hover ul {

代替#headernav li hover:ul {

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

于 2013-01-13T01:01:08.950 回答
0

添加箭头的一种非常简单的方法是：

#headernav li {
    float:left;
    position:relative;   <-- add this
}

然后将此类添加到您的CSS

#headernav li a.hasdropdown:after {
  content: " ";
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 7px 6px 0 6px;
  border-color: #000000 transparent transparent transparent;
  position:absolute;
  left: 90px;
  top: 24px;  
}

将“hasdropdown”类添加到应显示箭头的每个 Anchor-Tag：

<li><a href="about.html" class="hasdropdown">About Us</a>

希望这个对你有帮助。

于 2013-01-13T01:35:36.417 回答