ドロップダウンリストが表示されない

Question

私のメニューに問題があります。私はマウスが上にあるときに私のドロップダウンメニューを表示しようとしているが、それは起こらない。私はこのコードでこれをやろうとしている：

#power-bi-reports 
 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #222222; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

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

 
li.dropdown { 
 
    display: inline-block; 
 
} 
 

 

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

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

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

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

<link href="~/Content/pbistyle.css" rel="stylesheet"/> 
 

 
<div id="power-bi-reports"> 
 
    <div class="col-lg-12"> 
 
     <ul> 
 
      <li><a class="active" id="report-full-screen">Full Screen Mode</a></li> 
 
      <li><a class="active" id="report-print">Print Report</a></li> 
 
      <li><a class="active" id="report-filters">Hide Filters</a></li> 
 
      <li style="float: right" id="dropdown"> 
 
       <a href="javascript:void(0)" style="" class="dropbtn">Dropdown</a> 
 
       <div class="dropdown-content"> 
 
        <a href="#">Link 1</a> 
 
        <a href="#">Link 2</a> 
 
        <a href="#">Link 3</a> 
 
       </div> 
 
      </li> 
 
     </ul> 
 
    </div> 
 
    <div class="col-lg-12" style="clear:both"> 
 
     <div id="pbi-report" style="height: 95vh;"></div> 
 
    </div> 
 
</div>

しかし、それは動作しません、このコードで何が間違っているのですか？

Answer 1

ドロップダウンには、ID、クラスではなく...

#power-bi-reports ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #222222; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

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

 
li.dropdown { 
 
    display: inline-block; 
 
} 
 

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

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

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

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

<link href="~/Content/pbistyle.css" rel="stylesheet" /> 
 

 
<div id="power-bi-reports"> 
 
    <div class="col-lg-12"> 
 
    <ul> 
 
     <li><a class="active" id="report-full-screen">Full Screen Mode</a></li> 
 
     <li><a class="active" id="report-print">Print Report</a></li> 
 
     <li><a class="active" id="report-filters">Hide Filters</a></li> 
 
     <li style="float: right" id="dropdown"> 
 
     <a href="javascript:void(0)" style="" class="dropbtn">Dropdown</a> 
 
     <div class="dropdown-content"> 
 
      <a href="#">Link 1</a> 
 
      <a href="#">Link 2</a> 
 
      <a href="#">Link 3</a> 
 
     </div> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
    <div class="col-lg-12" style="clear:both"> 
 
    <div id="pbi-report" style="height: 95vh;"></div> 
 
    </div> 
 
</div>