Question

我知道这很容易。但StaticSelectedStyle不会改变菜单按钮的颜色。

这是我的Site.css文件：

.panelMenu
{           
    width: 155px;
    padding-top: 5px;
    padding-left: 10px;
}

.StaticSelectedMenuStyle
{
 font-family:Times New Roman;
 color: White;
 background-color: #66a598;
 border: thin outset #A9A9A9 !important; 
 font-weight: bold;
 font-size: medium;
 padding-top:5px;
 padding-bottom:5px;
 padding-left: 10px;
 padding-right: 20px;
}

.StaticMenuStyle
{
 font-family:Times New Roman;
 color: White;
 background-color: #006a54;
 border: thin outset #A9A9A9 !important; 
 font-weight: bold;
 font-size: medium;
 padding-top:5px;
 padding-bottom:5px;
 padding-left: 10px;
 padding-right: 20px;
}

.DMenuStyle
{
 font-family:Times New Roman;
 color: White;
 background-color: #008C71;
 border: thin outset #A9A9A9;
 font-weight: bold;
 font-size: medium;
 z-index: 110;
}

这是我在我的Master.Page文件中的asp：菜单：

 <body>
    <form runat="server">
    <div class="page">
    <div class="header">
        <img alt="Heritage Valley Health System" src="Images/HVHS_Banner.jpg" style="width: 960px" />
    </div>
    <table class="style1" cellpadding="0px" align="left">
        <tr valign="top">
            <td id="cell_menu" valign="top">
                <asp:Panel ID="pnlMenu" runat="server" CssClass="panelMenu" ScrollBars="None" >
                    <asp:Menu ID="MainMenu" runat="server">  
                    <StaticMenuItemStyle CssClass="StaticMenuStyle"/> 
                    <StaticSelectedStyle CssClass="StaticSelectedMenuStyle" />             
                    <Items>
                        <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Create Message"/>
                        <asp:MenuItem NavigateUrl="~/EditProfile.aspx" Text="Edit Profile"/>
                        <asp:MenuItem NavigateUrl="~/EditGroup.aspx" Text="Edit Group"/>
                        <asp:MenuItem NavigateUrl="~/MessageReport.aspx" Text="Message Report"/>
                        <asp:MenuItem NavigateUrl="~/About.aspx" Text="Admin"/>
                    </Items>
                </asp:Menu>
                </asp:Panel>  
            </td>  
            <td id="cell_content" valign="top">
                <asp:Panel ID="pnlMain" runat="server" CssClass="panelContent" ScrollBars="None">
                    <asp:ContentPlaceHolder ID="MainContent" runat="server" /> 
                </asp:Panel>
            </td>
        </tr>           
    </table>
    </div>
    </form>
</body>

我需要设置其他东西吗？我只是希望菜单中的按钮在选择时是较浅的背景颜色。

Answer 1

试试这个，我已经为基于表和列表的选项提供了CSS。

基本上你需要让a标签填充父级并使用a:active来改变颜色等。我使用了一些快速解决方案来垂直居中文本。

.nav td, .nav li
{
    width:130px;
    height:30px;
    position:relative;
    padding:0;
    vertical-align:center;
}

.nav a {
    display:block;
    background-color:#DDD;
    height:100%;
    line-height:30px;
    vertical-align:center;
    padding:0 3px;
}

.nav a:active
{
    background-color:#DDF;    
}


ul.nav {list-style:none; padding-left:0; }
ul.nav li {display:inline-block}

<table class="nav" border="0" cellpadding="0" cellspacing="4">
    <tr>
        <td><a href="#">Link 1</a></td>
        <td><a href="#">Link 2</a></td>
        <td><a href="#">Link 3</a></td>
        <td><a href="#">Link 4</a></td>
    </tr>
</table>    

<ul class="nav" >
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
</ul>

Answer 2

看起来自4.0以来有一些重大变化。如果我明白了，你必须指定“选择的”＃39;样式更直接在标记中，而不是css，例如：

<staticselectedstyle backcolor="LightBlue"
      borderstyle="Solid"
      bordercolor="Black"
      borderwidth="1"/>

更多细节here。

Answer 3

如果asp：Menu在表格之外，css是否显示正确？

    <table class="style1" cellpadding="0px" align="left">

更改所选菜单项的颜色

3 个答案: