简单的 HTML/CSS 下拉导航栏未显示

Question

I'm a beginner in the world of coding and I'm making a drop-down menu in my navbar and it's just not showing, I can actually click the first link in the drop-down menu on only a couple pixels, as if it's there but something's stopping from being seen:

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

this is your code,, I can see menu, but you had issue with text having white color :)

 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>

Answer 2

remove color and try to clear cache and cookies in inspect element > network

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

Answer 3

Try this :

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