未显示布尔玛下拉箭头

Question

我目前正在与bulv navbar作斗争。这是我的标题：

 <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

您的代码与未经编辑的布尔玛文件结合在一起，在下拉项旁边显示一个箭头。请参阅下面的演示（您可能需要查看整页，也许是因为从平板电脑开始将导航更改为汉堡菜单）。

我的猜测是，您已经以打破箭头的方式编辑了布尔玛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>