为什么当我将鼠标悬停在下拉按钮上时，它的链接没有出现？

Question

我正在尝试添加一个下拉按钮，当鼠标悬停在按钮上时显示一些链接，当我尝试为此实现 css 时，一切似乎都工作正常，除了实际链接没有显示在按钮下。

我尝试为下拉按钮和不同的引导功能使用不同的样式表，但它们要么丢失了按钮，要么出现了同样的问题。

这是我在我的 asp.net 核心网络应用中的布局页面中的导航栏的一部分：

a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}


/* The dropdown container */

.dropdown {
  float: left;
  overflow: hidden;
}


/* Dropdown button */

.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: black;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}


/* Add a red background color to navbar links on hover */

.dropdown:hover .dropbtn {
  background-color: lightgray;
}


/* Dropdown content (hidden by default) */

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


/* Links inside the dropdown */

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


/* Add a grey background color to dropdown links on hover */

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


/* Show the dropdown menu on hover */

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

<header>
    <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
        <div class="container-fluid">
            <a class="navbar-brand" asp-area="" asp-page="/Index">Demo</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row ">
                <ul class="navbar-nav flex-grow-1">
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
                    </li>
                </ul>
                <div class="dropdown">
                    <button class="dropbtn">
                        Dropdown
                        <i class="fa fa-caret-down"></i>
                    </button>
                    <div class="dropdown-content">
                        <a href="#">Link 1</a>
                        <a href="#">Link 2</a>
                        <a href="#">Link 3</a>
                    </div>
                </div>
            </div>

        </div>
    </nav>
</header>

当我将鼠标悬停在下拉按钮上时，它会工作并突出显示，但下拉菜单链接不会出现在按钮下方。

[编辑]：当我在这里运行代码 sn-p 时，下拉按钮实际上可以工作并显示 3 个链接，但是，当我在我的网络应用程序上运行它时，我看到的只是“下拉”按钮然后当我将鼠标悬停在它上面时，不会发生任何其他事情，按钮下方不会出现任何链接。

Answer 1

在样式中添加text-decoration: underline;。下面是修改后的代码（css）

a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}


/* The dropdown container */

.dropdown {
  float: left;
  overflow: hidden;
}


/* Dropdown button */

.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: black;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}


/* Add a red background color to navbar links on hover */

.dropdown:hover .dropbtn {
  background-color: lightgray;
  text-decoration: underline; 
}


/* Dropdown content (hidden by default) */

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


/* Links inside the dropdown */

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


/* Add a grey background color to dropdown links on hover */

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


/* Show the dropdown menu on hover */

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

.dropdown-content a {
  text-decoration: underline;
}

Answer 2

好的，我想通了。我的下拉按钮与引导程序的下拉类冲突，因此我不得不将我的 CSS 中的下拉菜单重命名为与引导程序不匹配的名称。这确实有效并产生了一个可悬停的下拉按钮。