菜单项无法显示CSS中的内容

本文关键字：CSS 显示 菜单项 | 更新日期: 2023-09-27 17:50:24

<td class="style22" align="center">
    <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
        <Items>
            <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
            <asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/>
        </Items>
    </asp:Menu>
&nbsp;</td>
<td align="center">


div.menu
{
    padding: 4px 0px 4px 8px;
}
div.menu ul
{
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: auto;
}
div.menu ul li a, div.menu ul li a:visited
{
    background-color: #465c71;
    border: 1px #4e667d solid;
    color: #dde4ec;
    display: block;
    line-height: 1.35em;
    padding: 4px 20px;
    text-decoration: none;
    white-space: nowrap;
}
div.menu ul li a:hover
{
    background-color: #bfcbd6;
    color: #465c71;
    text-decoration: none;
}
div.menu ul li a:active
{
    background-color: #465c71;
    color: #cfdbe6;
    text-decoration: none;
}

菜单项无法显示CSS中的内容

这是因为你的。net Framework将asp:MenuItem呈现为Table。

你可以把renderingmode改成list，问题就解决了。

要改变你的renderingMode，你必须添加:

RenderingMode="List"

到<Asp:Menu>标签如下:

    <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal" RenderingMode="List">

将div.menu改为。menu 

.menu
{
    padding: 4px 0px 4px 8px;
}
.menu ul
{
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: auto;
}
.menu ul li a, .menu ul li a:visited
{
    background-color: #465c71;
    border: 1px #4e667d solid;
    color: #dde4ec;
    display: block;
    line-height: 1.35em;
    padding: 4px 20px;
    text-decoration: none;
    white-space: nowrap;
}
.menu ul li a:hover
{
    background-color: #bfcbd6;
    color: #465c71;
    text-decoration: none;
}
.menu ul li a:active
{
    background-color: #465c71;
    color: #cfdbe6;
    text-decoration: none;
}
相关文章：