Using CSS in my Menu Control

Question

I have a menu control and what im looking to do is change the color of each of the menuItem but dont have a cssClass property to do so. How could I accomplish this. Here is my code below.

<asp:Menu ID="Menu1" runat="server" CssClass="menu"  Orientation="horizontal"> 
            <Items>
                <asp:MenuItem NavigateUrl="" Text="Home"/>
                <asp:MenuItem NavigateUrl="" Text="Entry">
                     <asp:MenuItem Text="New" NavigateUrl=""/>
                    <asp:MenuItem Text="Edit" NavigateUrl=""/>
                </asp:MenuItem>

                <asp:MenuItem NavigateUrl="" Text="Maintenance">
                </asp:MenuItem>

                 <asp:MenuItem Text="Main Form">
                    <asp:MenuItem Text="Add a record" NavigateUrl=""/>
                    <asp:MenuItem Text="Edit a record" NavigateUrl=""/>
                </asp:MenuItem>
            </Items>
        </asp:Menu>

Sometimes you can still access the style attribute even though intellisense doesn't pick it up. Have you tried that? — James Johnson
– James Johnson, Commented Mar 29, 2012 at 14:40
Have you had a look in the 'Site.Css' file? I think you can change the colour of them. Hope this helps. Note: It will be at the bottom, under TAB MENU — user959631
– user959631, Commented Mar 29, 2012 at 14:42
@user959631 What if the user doesn't have this default Site.Css you are referring to? What if the user only wants to change this one particular instance of Menu? — Curtis
– Curtis, Commented Mar 29, 2012 at 15:03

Community · Accepted Answer · 2017-05-23 12:11:25Z

3

Personally I would scrap the use of the ASP.NET Menu control, and rebuild your navigation in plain, straight forward, HTML & CSS.

From my experiences with ASP.NET Menu's these generally render into bad HTML. I believe they render into HTML tables, which is not what HTML tables are for.

Furthermore, you'll then be able to style the HTML as you wish, as you'll have full control over your code.

That being said, there is a way of styling the MenuItem's, by applying reference to the main control CssClass. For example, if I'm correct that Menu's use HTML tables when rendered, you could style them using the following code:

.menu tr td
{
   //styles here
}

edited May 23, 2017 at 12:11

CommunityBot

11 silver badge

answered Mar 29, 2012 at 14:36

Curtis

104k69 gold badges280 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

James Johnson Over a year ago

+1 for offering a better alternative and answering the question.

Collectives™ on Stack Overflow

Using CSS in my Menu Control

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related