ASP.NET 菜单样式。动态菜单中最后一个元素底部的边框

Question

我的网站上有一个基本的 ASP:Menu。

我想要做的是在我的下拉菜单中的最后一个元素的底部添加一个 1px 纯黑色边框。 CSS 似乎什么也没做，而且我似乎也找不到可以做到这一点的控件。

如能提供有关此主题的任何帮助或信息，我们将不胜感激。

到目前为止，我已将菜单添加到网站上。 CSS 主要改变了颜色、字体和 :hover 样式。正如我上面所说，当我向 CSS 添加边框时似乎没有任何反应？所以我只能假设我缺少一些控制？

HTML 代码

            <div id="navigation">
                <asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1" StaticEnableDefaultPopOutImage="false" Orientation="Horizontal" 
                    DynamicMenuItemStyle-CssClass="nbottom"
                    DynamicMenuStyle-CssClass="nbottomitem"
                    StaticMenuItemStyle-CssClass="ntop"> 
                </asp:Menu>
                <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="false" />
            </div>

CSS 代码

#navigation {
    position: relative;
    float: right;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    margin-top: 20px;
    color: #A9A9A9;
}
.ntop {
    margin-left: 30px;
    margin-bottom: 20px;
    color: #A9A9A9;
}
.nbottom {
    padding-top: 20px;
    padding-bottom: 17px;
    padding-left: 32px;
    height: 24px;
    background-color: #ffffff;
    width: 360px;
}
.nbottom:hover {
    background-color: #ffffff;
    color: #4fd0f0;
}
.ntop:hover {
    color: #4fd0f0;
}

http://tinypic.com/r/mhfzap/8

Answer 1

你应该为此使用 last-child 伪 class。

根据 docs

The :last-child CSS pseudo-class represents any element that is the last child element of its parent.

所以，将此添加到您的 CSS

nbottomitem:last-child{
   border-bottom:1px solid #000;
}

ASP.NET 菜单样式。动态菜单中最后一个元素底部的边框

ASP.NET Menu Styling. Border on the bottom of the last element in the dynamic menu

html

css

asp.net

jquery

menu