シンプルなHTML/CSSドロップダウンNavbarが表示されない

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; 
 
    \t 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 
 
    { 
 
    \t 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> \t 
 
</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>

Answer 2

削除の色や要素を検査で明確なキャッシュやクッキーにしてみてください>ネットワーク

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