简单的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

这是你的代码，我可以看到菜单，但你有问题的文字有白色：）

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

删除颜色并尝试清除检查元素中的缓存和cookie＆gt;网络

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

尝试一下：

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