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;之类的内容。

Answer 2

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

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

希望这有点帮助。

下拉菜单未显示

2 个答案: