html - 布尔玛下拉箭头未显示
问题描述
我目前正在努力使用 bulma 导航栏。这是我的标题:
<header class="navbar">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item">
<span class="icon has-text-primary is-large">
<i class="mdi mdi-36px mdi-hexagon-multiple"></i>
</span>
<!-- <h1 class="title is-1">DNW</h1> -->
</a>
<span class="navbar-burger burger" data-target="navbarMenuHeroC">
<span></span>
<span></span>
<span></span>
</span>
</div>
<div class="navbar-menu">
<div class="navbar-end">
<a class="navbar-item">
Home
</a>
<a class="navbar-item">
Forum
</a>
<a class="navbar-item">
Spiele
</a>
<div class="navbar-item has-dropdown is-hoverable is-arrowless">
<div class="navbar-link">
<img class="nav-profilepic" src="https://static.wixstatic.com/media/1bfda4_6f8ae00a346644a89245f331fc6c6b8e~mv2_d_3476_5214_s_4_2.jpeg?dn=">
Tränenreich
</div>
<div class="navbar-dropdown">
<a class="navbar-item">
Profil
</a>
<a class="navbar-item">
Nachrichten
</a>
<a class="navbar-item">
Rangliste
</a>
<hr class="navbar-divider">
<a class="navbar-item">
Hilfe
</a>
<a class="navbar-item">
Einstellungen
</a>
<a class="navbar-item">
Mod-Forum
</a>
</div>
</div>
</div>
</div>
</div>
</header>
下拉菜单应显示一个蓝色箭头。但它不会在 Chrome 和 Firefox 中显示。任何想法如何解决这一问题? 我希望输出在“Tränenreich”旁边的右侧显示一个下拉箭头。悬停效果很好。
问候
解决方案
您的代码与未经编辑的 Bulma 文件相结合,在下拉项旁边显示一个箭头。请参阅下面的演示(您可能必须查看整页,因为导航从平板电脑向下更改为汉堡菜单)。
我的猜测是您以破坏箭头的方式编辑了 Bulma CSS,或者您有一些与之冲突的自定义 CSS。
箭头是使用:after
伪元素创建的。
.navbar-link:not(.is-arrowless)::after,
.select:not(.is-multiple):not(.is-loading)::after {
border: 3px solid transparent;
border-radius: 2px;
border-right: 0;
border-top: 0;
content: " ";
display: block;
height: .625em;
margin-top: -.4375em;
pointer-events: none;
position: absolute;
top: 50%;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: center;
transform-origin: center;
width: .625em;
}
检查您的自定义 CSS 以查看您是否有任何:after
影响导航项的样式元素。
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css" rel="stylesheet"/>
<header class="navbar">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item">
<span class="icon has-text-primary is-large">
<i class="mdi mdi-36px mdi-hexagon-multiple"></i>
</span>
<!-- <h1 class="title is-1">DNW</h1> -->
</a>
<span class="navbar-burger burger" data-target="navbarMenuHeroC">
<span></span>
<span></span>
<span></span>
</span>
</div>
<div class="navbar-menu">
<div class="navbar-end">
<a class="navbar-item">
Home
</a>
<a class="navbar-item">
Forum
</a>
<a class="navbar-item">
Spiele
</a>
<div class="navbar-item has-dropdown is-hoverable is-arrowless">
<div class="navbar-link">
<img class="nav-profilepic" src="https://static.wixstatic.com/media/1bfda4_6f8ae00a346644a89245f331fc6c6b8e~mv2_d_3476_5214_s_4_2.jpeg?dn=">
Tränenreich
</div>
<div class="navbar-dropdown">
<a class="navbar-item">
Profil
</a>
<a class="navbar-item">
Nachrichten
</a>
<a class="navbar-item">
Rangliste
</a>
<hr class="navbar-divider">
<a class="navbar-item">
Hilfe
</a>
<a class="navbar-item">
Einstellungen
</a>
<a class="navbar-item">
Mod-Forum
</a>
</div>
</div>
</div>
</div>
</div>
</header>
推荐阅读
- c# - 重写 ValidationAttribute ErrorMessage,从字符串到新的 ErrorModel 类
- dictionary - ansible 映射一个属性
- python - 通过两个 1 维制作 2 维数组
- swiftui - Xcode 12 中的颜色暗外观 - SwiftUI
- c# - c#超过100个结果在循环中超时
- c - 初学者的问题:如何将 char* 变成字符串?
- javascript - 带有子菜单的汉堡菜单
- ios - 如何点击 TableView Cell 并导航到下一个 ViewController 中的另一个 TableView(本地 JSON 文件)
- excel - 在不激活工作表的情况下循环遍历列并复制不断变化的单元格范围
- html - 关于将链接作为图像插入的菜鸟问题