未顯示布爾瑪下拉箭頭

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

您的代碼與未編輯的布爾瑪文件結合在一起，在下拉項旁邊顯示一個箭頭。 請參閱下面的演示（您可能必須查看整頁，也許是因為從平板電腦開始將導航更改為漢堡菜單）。

我的猜測是，您已經以打破箭頭的方式編輯了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元素中影響nav-item。

 <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>