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

有人可以帮忙吗？