javascript - 简单的 HTML/CSS 下拉导航栏不显示

Question

我是编码领域的初学者，我在我的导航栏中制作了一个下拉菜单，但它没有显示，我实际上只能在几个像素上单击下拉菜单中的第一个链接，就好像它在那里，但有些东西正在停止被看到:

CSS:

li a, .dropbtn 
    {
        display: inline-block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }
    
    li a:hover, .dropdown:hover .dropbtn 
    {
        background-color: ##4CAF50;
    }
    
    li.dropdown 
    {
        display: inline-block;
    	position: relative;
    }
    
    .dropdown-content 
    {
        display: none;
        position: absolute;
        background-color: #333;
        min-width: 200px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }
    
    .dropdown-content a 
    {
        color: white;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: center;
    }
    
    .dropdown-content a:hover 
    {
    	background-color: #111
    }
    
    .dropdown:hover .dropdown-content 
    {
        display: block;
    }

<div id="navbar">
  <ul>
    <li><a href="Table.html">Home</a></li>
    <li><a href="sponsors.html">Sponsors</a></li>
    <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">About</a>
    <div class="dropdown-content">
      <a href="entryform.html" class="active">About Busking @ Stanthorpe</a>
      <a href="credits.html">Credits</a>
      <a href="faq.html">FAQ</a>
    <a href="media.html">Media</a>
    <li><a href="contact.html">Contact</a></li>
  </ul>	
</div>

Answer 1

这是你的代码，我可以看到菜单，但是你遇到了白色文本的问题:)

li a, .dropbtn 
{
    display: inline-block;
    /*color: white;*/
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn 
{
    background-color: #4CAF50;
}

li.dropdown 
{
    display: inline-block;
    position: relative;
}

.dropdown-content 
{
    display: none;
    position: absolute;
    background-color: #333;
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a 
{
    
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: center;
}

.dropdown-content a:hover 
{
    background-color: #111
}

.dropdown:hover .dropdown-content 
{
    display: block;
}

 <div id="navbar">
<ul>
        <li><a href="Table.html">Home</a></li>
        <li><a href="sponsors.html">Sponsors</a></li>
        <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">About</a>
    <div class="dropdown-content">
      <a href="entryform.html" class="active">About Busking @ Stanthorpe</a>
      <a href="credits.html">Credits</a>
      <a href="faq.html">FAQ</a>
      <a href="media.html">Media</a>
        <li><a href="contact.html">Contact</a></li>
    </ul>   
</div>