下拉列表不显示

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

Dropdown是一个id，而不是一个类......

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;