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, Mar 29 '12 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, Mar 29 '12 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, Mar 29 '12 at 15:03

score 3 · Answer 1 · edited May 23 '17 at 12:11

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
}

+1 for offering a better alternative *and* answering the question. — James Johnson, Mar 29 '12 at 14:42

Using CSS in my Menu Control

1 Answers1