下拉菜单不显示

我无法得到这个菜单的下拉菜单来显示 - 我确定这是一个简单的修复 - 我只是没有看到它。菜单本身没什么特别，没有子菜单 - 只需简单的拖放选项。我已经检查了几个教程，它们都是不同的，所以如果我能够在调整工作方面得到帮助，那么我已经做到了这一点，这将是最好的方案。感谢您提前提供任何帮助！下拉菜单不显示

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

来源

2013-01-13 user1913714

你是否反对使用JavaScript或jQuery？ –

不 - jquery是好的，但我真的想让我已经有工作 - 我正在学习 – user1913714

我想你的意思是写

#headernav li:hover ul {

，而不是#headernav li hover:ul {

而且很可能需要添加像top: 60px;这一类。

来源

2013-01-13 01:01:08 subarachnid

哦......就是这样 - 谢谢！我想要在主li上添加一个小箭头来展开下一个li，而不是将鼠标悬停在整个链接上......是否有一种简单的方法可以执行此操作？ – user1913714

我会再添加一个答案 – subarachnid

谢谢！另外，当我添加多个链接到第二节，链接显示并排而不是一个在另一个之上...如何解决？ – user1913714

一个非常简单的方法来添加箭头将是：

#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”类添加到每个锚标记，应显示一个箭头：

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

希望这会有所帮助。

来源

2013-01-13 01:35:36 subarachnid

没有做任何事情 - 什么也没有出现。我不知道这是因为我使用链接的背景图像？ – user1913714

这是可能的，如果背景图像是纯黑色:)很难说没有看到完整的HTML代码发生了什么。 – subarachnid

下拉菜单不显示

回答

相关问题