jquery - リンクの幅に応じて、各リンク メニューの下部に三角形を追加します。

Question

1 つの psd メニューを css ベースのメニューに変換しています。以下の元のpsdデザインを見つけてください

私の仕事は三角形なしで続きます。

私の問題は、リンクの幅に応じて三角形を追加することです

私のhtml

    <div class="navbar-collapse collapse menu pull-right">
            <ul class="nav navbar-nav">
                <li class="active">
                    <a href="#">
                        Home
                    </a>
                </li>
                <li>
                    <a href="#">
                     ABOUT US
                    </a>
                </li>
                <li>
                    <a href="#">
                    PRODUCTS
                    </a>
                </li>
                <li>
                    <a href="#">
                      Portfolio
                    </a>
                </li>
                <li>
                    <a href="#features-listing">
                       HR Service
                    </a>
                </li>
                <li>
                    <a href="#offers">
                      Contact
                    </a>
                </li>
            </ul>
        </div>
    </div>

css (ブートストラップのヘルプ)

                .menu ul > li > a {
                padding: 63px 18px 31px;
                color: #000;
                font-weight:bold;
            }
            .menu ul > li > a:hover {
                background: #2390D5;
                color: #fff !important;
            }
            .menu ul li a {
                transition: border 150ms ease-in-out 0s, background-color 150ms ease-in-out 0s;
            }
            .menu .active {
                background: #2390D5;
            }
            li.active a {
                color: #fff !important;
            }