Bootstrap по-прежнему показывает разделитель навигации для последнего скрытого элемента списка

Question

Я заметил небольшую проблему с навигацией Bootstrap 3.3.7 и последним скрытым элементом списка, он по-прежнему отображает разделитель навигации.

Не имеет значения, содержит ли элемент списка раскрывающийся классили нет, класс hide, кажется, просто препятствует отображению элемента списка, ul#main-menu li:last-child, кажется, игнорируется.

Пожалуйста, посмотрите мой пример кода ниже:

<div id="navigation">
    <div class="navbar navbar-fixed-top" id="top">
        <div class="navbar-inner">
            <div class="inner">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle btn btn-navbar" data-toggle="collapse" data-target=".navbar-collapse">
                            <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="/" title="Home"><h1>WebApplication1</h1><span>@ViewBag.Title</span></a>
                    </div>
                    <div class="collapse navbar-collapse">
                        <ul class="nav navbar-right" id="main-menu">
                            @Html.MenuLink("Home", "Home", "Index", "Home")
                            <li class="dropdown">
                                <a href="#" title="Test" class="dropdown-toggle" data-toggle="dropdown">Test <b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    @Html.MenuLink("Link1", "Home", "LinkOne", "Link1")
                                    @Html.MenuLink("Link2", "Home", "LinkTwo", "Link2")
                                    @Html.MenuLink("Link3", "Home", "LinkThree", "Link3")
                                </ul>
                            </li>
                            <li class="dropdown hide" id="notificationsLink">
                                <a href="#" title="Notifications" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-bell-o" aria-hidden="true"></i> <span id="notificationsBadge" class="badge badge-primary"></span> <b class="caret"></b></a>
                                <ul class="dropdown-menu" id="notificationsList"></ul>
                            </li>
                            @*<li class="hide">
                                <a href="#">Test</a>
                            </li>*@
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

ul#main-menu li:last-child {
    border-right: none;       
}

Может кто-нибудь пожалуйстапомочь с этим нигде?