gpt4 book ai didi

html - 为什么当我将鼠标悬停在下拉按钮上时,其中的链接没有出现?

转载 作者:行者123 更新时间:2023-11-28 19:21:36 25 4
gpt4 key购买 nike

我正在尝试添加一个下拉按钮,当鼠标悬停在按钮上时会显示一些链接,当我尝试为此实现 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>

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

[编辑]:当我在这里运行代码片段时,下拉按钮实际上可以工作并显示 3 个链接,但是,当我在我的网络应用程序上运行它时,我看到的只是按钮“下拉”,然后当我将鼠标悬停在它上面没有其他任何反应,按钮下方没有出现任何链接。

最佳答案

在样式中添加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;
}

关于html - 为什么当我将鼠标悬停在下拉按钮上时,其中的链接没有出现?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57195122/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com