dropdown-content не отображается, даже если на дисплее установлено значение

Question

Я пытаюсь создать раскрывающийся список для моего веб-сайта, но по какой-то причине раскрывающийся список контента не отображается. Я установил отображение «блокировать» в моем CSS, но он все еще не отображается.

Вот мой HTML:

<div class = "dropdown"> 
<li class = "topnavitem"> 
    <a> Projects </a> 
    <div class = "dropdown-content"> 
    <a href="#"> Project 1 </a> 
    <a href="#"> Project 2 </a> 
    <a href="#"> Project 3 </a> 
    </div> 
</li> 
</div> 

А вот мой CSS:

.dropdown { 
    display:block; 
    float:left; 

} 

.dropdown-content { 
    display: block; 
    position: absolute; 
    background-color: rgba(255, 255, 255, 0.8); 
    width: 20%; 
} 

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

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

li.topnavitem { 
float: left; 
} 

li.topnavitem a { 
    display: block; 
    color: white; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
} 

li.topnavitem a:hover { 
    background-color:grey; 
} 

У меня есть больше кода относительно фактической навигационной панели, но я абсолютно уверен, что проблема с этим код. Заранее спасибо.

Answer 1

, как я уже упоминал в своем комментарии, вот working JS Fiddle

Я просто добавил цвет: черный;

li.topnavitem a { 
    display: block; 
    color: black; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
} 

Это вы что искали?

Answer 2

То, что я думаю, что вы хотите, это что-то вроде этого:

.dropdown { 
 
    display:block; 
 
    float:left; 
 

 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: rgba(255, 255, 255, 0.8); 
 
    width: 20%; 
 
} 
 

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

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

 
ul{ 
 
list-style-type:none; 
 
} 
 

 
li.topnavitem { 
 
float: left; 
 
} 
 
li.topnavitem a { 
 
    display: block; 
 
    color: black; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 

 
.topnavitem a:hover { 
 
    background-color:grey; 
 
}

<div class = "dropdown"> 
 
<ul class = "topnavitem"> 
 
    <a> Projects </a> 
 
    <div class = "dropdown-content"> 
 
    <li><a href=""> Project 1 </a></li> 
 
    <li><a href=""> Project 2 </a></li> 
 
    <li><a href=""> Project 3 </a></li> 
 
    </div> 
 
</ul> 
 
</div>