<asp:Menu> 控件 应用css样式

[html] view plain copy print ?

1. <asp:Menu ID="mnuTopMenu" runat="server" DynamicEnableDefaultPopOutImage="False"  
2.                     DynamicHorizontalOffset="-1" Font-Bold="false" Orientation="Horizontal" StaticEnableDefaultPopOutImage="False"  
3.                     StaticSubMenuIndent="10px" DisappearAfter="600"   
4.                     StaticSelectedStyle-CssClass="StaticSelectedStyle"  
5.                     StaticMenuItemStyle-CssClass="StaticMenuItemStyle"  
6.                     StaticHoverStyle-CssClass="StaticHoverStyle"  
7.                     DynamicMenuStyle-CssClass="DynamicMenuStyle"  
8.                     DynamicSelectedStyle-CssClass="DynamicSelectedStyle"  
9.                     DynamicMenuItemStyle-CssClass="DynamicMenuItemStyle"  
10.                     DynamicHoverStyle-CssClass="DynamicHoverStyle"  
11.                      onmenuitemclick="mnuTopMenu_MenuItemClick" >  
12.                   <Items></Items>  
13.                 </asp:Menu>  

<asp:Menu ID="mnuTopMenu" runat="server" DynamicEnableDefaultPopOutImage="False"
                    DynamicHorizontalOffset="-1" Font-Bold="false" Orientation="Horizontal" StaticEnableDefaultPopOutImage="False"
                    StaticSubMenuIndent="10px" DisappearAfter="600" 
                    StaticSelectedStyle-CssClass="StaticSelectedStyle"
                    StaticMenuItemStyle-CssClass="StaticMenuItemStyle"
                    StaticHoverStyle-CssClass="StaticHoverStyle"
                    DynamicMenuStyle-CssClass="DynamicMenuStyle"
                    DynamicSelectedStyle-CssClass="DynamicSelectedStyle"
                    DynamicMenuItemStyle-CssClass="DynamicMenuItemStyle"
                    DynamicHoverStyle-CssClass="DynamicHoverStyle"
                     onmenuitemclick="mnuTopMenu_MenuItemClick" >
                  <Items></Items>
                </asp:Menu>

css样式如下：

[css] view plain copy print ?

1. .mnuTopMenu  
2. {  
3.     background-color:Transparent;  
4.     font-family: 宋体;  
5.     font-size: 12px;  
6.     position:relative;  
7.     top:34px;  
8. }  
9.   
10. .DynamicMenuStyle /*动态菜单矩形区域样式*/  
11. {  
12.     background-color: white;  
13.     border: solid 1px #ACC3DF;  
14.     padding: 1px 1px 1px 1px;  
15.     text-align: left;  
16. }  
17.   
18. .DynamicHoverStyle /*动态菜单项:鼠标悬停时的样式*/  
19. {  
20.     background-color: #F7DFA5; /*#7C6F57;*/  
21.     color: #333333;  
22. }  
23.   
24. .DynamicSelectedStyle /*动态菜单项:选择时的样式*/  
25. {  
26.     /*background-color:Gainsboro;*/  
27.     color: red;  
28. }  
29.   
30. .DynamicMenuItemStyle /*动态菜单项样式*/  
31. {  
32.     padding: 2px 5px 2px 5px;  
33.     color: #333333;  
34. }  
35.   
36.   
37. .StaticSelectedStyle /*静态菜单项:选择时的样式*/  
38. {  
39.     /*background-color:Gainsboro;*/  
40.     color: red;  
41. }  
42.   
43. .StaticMenuItemStyle /*静态菜单项样式*/  
44. {  
45.     cursor: hand;  
46.     padding: 2px 5px 2px 5px;  
47.     color: #333333;  
48.     background-color::Transparent;  
49. }  
50.   
51. .StaticHoverStyle /*静态菜单项:鼠标悬停时的样式*/  
52. {  
53.     background-color: #84BCCD; /*#7C6F57;*/  
54.     cursor: hand;  
55.     color: #333333;  
56. }