Bulma 下拉箭头未显示

Question

我目前正在为 bulma 导航栏而苦恼。这是我的 header:

 <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" 旁边的右侧显示一个下拉箭头。悬停效果非常好。

问候

Answer 1

您的代码与未经编辑的 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 以查看是否有任何影响 nav-item 的样式 :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>

Bulma 下拉箭头未显示

Bulma dropdown arrow isn't shown

html

css

bulma