How to style an asp net menu with CSS

Question

I m in the process of styling an asp net menu and I m trying to understand the meaning of the StaticSelectedStyle-CssClass and StaticHoverStyle-CssClass parameters   My understanding is that the styles defined with these parameters are applied as CSS classes to the relevant elements  whenever needed  So I created my menu as follows    lt asp Menu ID  NavigationMenu  DataSourceID  NavigationSiteMapDataSource           StaticMenuStyle-CssClass  StaticMenuStyle          StaticMenuItemStyle-CssClass  StaticMenuItemStyle          StaticSelectedStyle-CssClass  StaticSelectedStyle          StaticHoverStyle-CssClass  StaticHoverStyle          Orientation  Horizontal           MaximumDynamicDisplayLevels  0           runat  server  gt   lt  asp Menu gt    It works for StaticMenuStyle-CssClass and StaticMenuStyle-CssClass  the classes are applied to the relevant elements   but StaticSelectedStyle-CssClass and StaticHoverStyle-CssClass are not applied  regardless of the selected or hover status of an element   What am I supposed to do to make this work   Thanks   EDIT  Sorry I should have mentioned that this is  NET 4  Here is the generated HTML    lt div id  NavigationMenu  gt    lt ul class  level1 StaticMenuStyle  gt     lt li gt  lt a class  level1 StaticMenuItemStyle selected  href   Link aspx  gt Link lt  a gt  lt  li gt    lt  ul gt   lt  div gt    So as you can see  StaticMenuStyle and StaticMenuItemStyle are applied  but not StaticSelectedStyle-CssClass or StaticHoverStyle-CssClass  Not sure why  I know I can use selected but isn t the expected behavior that StaticSelectedStyle-CssClass be applied    By using selected I make assumptions as to what  NET does behind the scenes and that s not right

User · Answer

I tried MikeTeeVee s solution  still not work  I mean the selected tab still not change and keep different color  This post solved my problem  Set CSS class   39 selected  39  in ASP NET menu parents and their children  Need put code in code behind

User · Answer

You can try styling with LevelSubMenuStyles               lt asp Menu ID  mainMenu  runat  server  Orientation  Horizontal                   StaticEnableDefaultPopOutImage  False  gt                   lt StaticMenuStyle CssClass  test    gt                   lt LevelSubMenuStyles gt                       lt asp SubMenuStyle BackColor   33CCFF  BorderColor   FF9999                           Font-Underline  False    gt                       lt asp SubMenuStyle BackColor   FF99FF  Font-Underline  False    gt                   lt  LevelSubMenuStyles gt                   lt StaticMenuItemStyle CssClass  main-nav-item    gt               lt  asp Menu gt

User · Answer

Just want to throw something in to help people still having this problem   for me at least  the css is showing that it puts default classes of level1  level2  and level3 on each piece of the menu level 1 being the menu  level2 being the first dropdown  level3 being the third popout   Setting the padding in css    level2   padding  2px 2px 2px 2px      does work for adding the padding to each li in the first dropdown

User · Answer

Alright  so there are obviously not a whole lot of people who have tried the  NET 4 menu as of today  Not surprising as the final version was released a couple days ago  I seem to be the first one to ever report on what seems to be a bug  I will report this to MS if I find the time  but given MS track-record of not paying attention to bug reports I m not rushing this   Anyway  at this point the least worst solution is to copy and paste the CSS styles generated by the control  check the header  into your own stylesheet and modify it from there  After you re done doing this  don t forget to set IncludeStyleBlock  False  on your menu so as to prevent the automatic generation of the CSS  since we ll be using the copied block from now on  Conceptually this is not correct as your application shouldn t rely on automatically generated code  but that s the only option I can think of

User · Answer

The best results I had with this broken control involved not using css at all  but rather using the built-in control properties for style  DynamicMenuItemStyle-BackColor  StaticHoverStyle-Width  etc     This is terrible practice and bloats your code  as well as forcing you to do this for every instance of the control    This does however work

User · Answer

I ran into the issue where the class of  selected  wasn t being added to my menu item  Turns out that you can t have a NavigateUrl on it for whatever reason   Once I removed the NavigateUrl it applied the  selected  css class to the a tag and I was able to apply the background style with   div menu ul li a static selected       background-color   bfcbd6  important      color   465c71  important      text-decoration  none  important

User · Answer

I don t know why all the answers over here are so confusing  I found a quite simpler one  Use a css class for the asp menu  say  mainMenu and all the menu items under this will be  a tags  when rendered into HTML  So you just have to provide  hover property to those  a tags  in your CSS  See below for the example    lt asp Menu ID  mnuMain  Orientation  Horizontal  runat  server  Font-Bold  True  Width  100   CssClass  mainMenu  gt     lt Items gt       lt asp MenuItem Text  Home  gt  lt  asp MenuItem gt       lt asp MenuItem Text  About Us  gt  lt  asp MenuItem gt     lt  Items gt   lt  asp Menu gt    And in the CSS  write    mainMenu   background  900     mainMenu a   color  fff     mainMenu a hover   background  c00  color  ff9      I hope this helps

User · Answer

The thing to look at is what HTML is being spit out by the control   In this case it puts out a table to create the menu   The hover style is set on the TD and once you select a menu item the control posts back and adds the selected style to the A tag of the link within the TD   So you have two different items that are being manipulated here   One is a TD element and another is an A element   So  you have to make your CSS work accordingly   If I add the below CSS to a page with the menu then I get the expected behavior of the background color changing in either case   You may be doing some different CSS manipulation that may or may not apply to those elements    lt style gt       StaticHoverStyle               background   000000              StaticSelectedStyle               background  blue         lt  style gt

User · Answer

There are well achieved third-party tools  but i usually use superfish http   www conceptdevelopment net Fun Superfish   it s cool  free and easy

User · Answer

I remember the StaticSelectedStyle-CssClass attribute used to work in ASP NET 2 0   And in  NET 4 0 if you change the Menu control s RenderingMode attribute  Table   thus making it render the menu as s and sub-s like it did back  05  it will at least write your specified StaticSelectedStyle-CssClass into the proper html element    That may be enough for you page to work like you want   However my work-around for the selected menu item in ASP 4 0  when leaving RenderingMode to its default   is to mimic the control s generated  selected  CSS class but give mine the   important  CSS declaration so my styles take precedence where needed    For instance by default the Menu control renders an  li  element and child  a  for each menu item and the selected menu item s  a  element will contain class  selected   among other control generated CSS class names including  static  if its a static menu item   therefore I add my own selector to the page  or in a separate stylesheet file  for  static  and  selected   a  tags like so   a selected static   background-color   f5f5f5  important  border-top  Red 1px solid  important  border-left  Red 1px solid  important  border-right  Red 1px solid  important

User · Answer

I feel your pain and I wasted all night morning trying to figure this out  With sheer brute force I figured out a solution   Call it a workaround - but it s simple   Add the CssClass property to your Menu Control s declaration like so    lt asp Menu ID  NavigationMenu  DataSourceID  NavigationSiteMapDataSource          CssClass  SomeMenuClass          StaticMenuStyle-CssClass  StaticMenuStyle          StaticMenuItemStyle-CssClass  StaticMenuItemStyle          Orientation  Horizontal           MaximumDynamicDisplayLevels  0           runat  server  gt   lt  asp Menu gt    Just rip out the StaticSelectedStyle-CssClass and StaticHoverStyle-CssClass attributes as they simply don t do jack   Now create the  SomeMenuClass   doesn t matter what you put in it   It should look something like this    SomeMenuClass       color Green      Next add the following two CSS Classes   For  Hover  Styling add    SomeMenuClass a static highlighted       color Red  important      For  Selected  Styling add    SomeMenuClass a static selected       color Blue  important      There  that s it   You re done   Hope this saves some of you the frustration I went through   BTW  You mentioned      I seem to be the first one to ever   report on what seems to be a bug    You also seemed to think it was a new  NET 4 0 bug   I found this  http   www velocityreviews com forums t649530-problem-with-staticselectedstyle-and-statichoverstyle html posted back in 2008 regarding Asp Net 2 0    How are we the only 3 people on the planet complaining about this   How I found the workaround  study the HTML output    Here is the HTML output when I set StaticHoverStyle-BackColor  Red     NavigationMenu a static highlighted       background-color Red      This is the HTML output when setting StaticSelectedStyle-BackColor  Blue     NavigationMenu a static selected       background-color Blue      text-decoration none      Therefore  the logical way to override this markup was to create classes for SomeMenuClass a static highlighted  and  SomeMenuClass a static selected  Special Notes   You MUST also use   important  on ALL the settings in these classes because the HTML output uses   NavigationMenu   and that means any styles Asp Net decides to throw in there for you will have inheritance priority over any other styles for the Menu Control with the ID  NavigationMenu    One thing I struggled with was padding  till I figured out Asp Net was using   NavigationMenu  to set the left and right padding to 15em   I tacked on   important  to my SomeMenuClass styles and it worked

[asp.net] How to style an asp.net menu with CSS

Examples related to asp.net

Examples related to css