Question

我一直在使用Asp菜单，我想将其文本颜色设置为白色，并在悬停时更改颜色。但它似乎不适合我。

我的Asp菜单代码是这个

<asp:Panel ID="MenuContainer" CssClass="Panel" runat="server">

                <asp:Menu ID="MainMenu" CssClass="StaticMenu" runat="server" Orientation="Horizontal" RenderingMode="List"  StaticEnableDefaultPopOutImage="False">
                    <DynamicMenuItemStyle CssClass="DynamicMenuItem" />
                    <DynamicMenuStyle CssClass="DynamicMenu" />
                    <Items>
                        <asp:MenuItem Text="File" Value="File">
                            <asp:MenuItem Text="Create User" Value="Create User"></asp:MenuItem>
                            <asp:MenuItem Text="New Item2" Value="New Item2"></asp:MenuItem>
                            <asp:MenuItem Text="New Item3" Value="New Item3"></asp:MenuItem>
                        </asp:MenuItem>
                        <asp:MenuItem Text="Edit" Value="Edit">
                            <asp:MenuItem Text="New Item1" Value="New Item1"></asp:MenuItem>
                            <asp:MenuItem Text="New Item2" Value="New Item2"></asp:MenuItem>
                            <asp:MenuItem Text="New Item3" Value="New Item3"></asp:MenuItem>
                            <asp:MenuItem Text="New Item3" Value="New Item4"></asp:MenuItem>
                        </asp:MenuItem>
                        <asp:MenuItem Text="Permissions" Value="Permissions">
                            <asp:MenuItem Text="User Permission" Value="User Permission"></asp:MenuItem>
                            <asp:MenuItem Text="New Item2" Value="New Item2"></asp:MenuItem>
                            <asp:MenuItem Text="New Item3" Value="New Item3"></asp:MenuItem>
                        </asp:MenuItem>
                    </Items>
                    <StaticMenuItemStyle CssClass="StaticMenuItem"/>
                </asp:Menu>
            </asp:Panel>

我的Css是这样的：

#MenuContainer{
    height:70%;
    width:100%;
    background-color:#264a60;
}

.StaticMenu{
    color:white;
    font-weight:bold;
    Font-Size:20px;
    text-decoration:none;
}

.StaticMenuItem{
     padding:5px;
}

.StaticMenuItem:hover{
    color:cyan;
}

.DynamicMenu{
    background-color:white;
    display:block;
}

.DynamicMenuItem{
    padding:5px;
    width:200px;
}

.DynamicMenuItem:hover{
    color:red;
}

我不知道从哪里，但菜单的文字采摘蓝色而不是白色。我错过了什么...... ???

示例代码

<div id="MenuContainer" class="Panel">


                <a href="#MainMenu_SkipLink" style="position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;">Skip Navigation Links</a><div class="StaticMenu" id="MainMenu">
            <ul class="level1">
                <li><a class="level1 StaticMenuItem" href="#" onclick="__doPostBack(&#39;MainMenu&#39;,&#39;File&#39;)">File</a><ul class="level2 DynamicMenu">
                    <li><a class="level2 DynamicMenuItem" href="#" onclick="__doPostBack(&#39;MainMenu&#39;,&#39;File\\Create User&#39;)">Create User</a></li><li><a class="level2 DynamicMenuItem" href="#" onclick="__doPostBack(&#39;MainMenu&#39;,&#39;File\\New Item2&#39;)">ghhsvdhh</a></li><li><a class="level2 DynamicMenuItem" href="#" onclick="__doPostBack(&#39;MainMenu&#39;,&#39;File\\New Item3&#39;)">New Item3</a></li>
                </ul></li><li><a class="level1 StaticMenuItem" href="#" onclick="__doPostBack(&#39;MainMenu&#39;,&#39;Edit&#39;)">Edit</a><ul class="level2 DynamicMenu">
                    <li><a class="level2 DynamicMenuItem" href="#" onclick="__doPostBack(&#39;MainMenu&#39;,&#39;Edit\\New Item1&#39;)">New Item1</a></li><li><a class="level2 DynamicMenuItem" href="#" onclick="__doPostBack(&#39;MainMenu&#39;,&#39;Edit\\New Item2&#39;)">New Item2</a></li><li><a class="level2 DynamicMenuItem" href="#" onclick="__doPostBack(&#39;MainMenu&#39;,&#39;Edit\\New Item3&#39;)">New Item3</a></li><li><a class="level2 DynamicMenuItem" href="#" onclick="__doPostBack(&#39;MainMenu&#39;,&#39;Edit\\New Item4&#39;)">New Item3</a></li>
                </ul></li><li><a class="level1 StaticMenuItem" href="#" onclick="__doPostBack(&#39;MainMenu&#39;,&#39;Permissions&#39;)">Permissions</a><ul class="level2 DynamicMenu">
                    <li><a class="level2 DynamicMenuItem" href="#" onclick="__doPostBack(&#39;MainMenu&#39;,&#39;Permissions\\User Permission&#39;)">User Permission</a></li><li><a class="level2 DynamicMenuItem" href="#" onclick="__doPostBack(&#39;MainMenu&#39;,&#39;Permissions\\New Item2&#39;)">New Item2</a></li><li><a class="level2 DynamicMenuItem" href="#" onclick="__doPostBack(&#39;MainMenu&#39;,&#39;Permissions\\New Item3&#39;)">New Item3</a></li>
                </ul></li>
            </ul>
        </div><a id="MainMenu_SkipLink"></a>

    </div>

提前致谢。

Answer 1

您正在创建锚标记。锚点的默认文本颜色是默认的浏览器蓝色。你可以用一些css覆盖它。

#MenuContainer a, li a {
  color: #fff;
}

#MenuContainer a:hover, li a:hover {
  color: #0ff;
}

字体颜色在悬停时不会改变

1 个答案: