ASP.NET 菜单样式。动态菜单中最后一个元素底部的边框[关闭]答案

【问题标题】：ASP.NET Menu Styling. Border on the bottom of the last element in the dynamic menu [closed]ASP.NET 菜单样式。动态菜单中最后一个元素底部的边框[关闭]
【发布时间】：2015-07-29 03:56:14
【问题描述】：

我的网站上有一个基本的 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

【问题讨论】：

如果您能向我们展示您到目前为止所做的事情，我们一定会帮助您。
对不起。我在主题中添加了一些代码和图像。
尝试在您的 CSS 中为 nbottomitem:last-child 提供 border-bottom
完美。你就是男人。

标签： jquery html css asp.net menu

【解决方案1】：

您应该为此使用 last-child 伪类。

根据docs

:last-child CSS 伪类表示任何元素其父元素的最后一个子元素。

所以，把这个添加到你的 CSS 中

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

【讨论】：