幾乎 Menu 控件外觀的各個方面都可以使用 Menu 控件的屬性或級聯樣式表 (CSS) 來管理。通過了解哪些屬性控制呈現的哪些方面，可以定制菜單的外觀。本主題介紹由 Menu 控件公開的樣式類型，並建議一些使用 Menu 控件設置樣式的最佳做法。
可以直接在標記中設置各種樣式的屬性或使用樣式表。CssClass 屬性可用於為菜單樣式分配 CSS 類，該樣式控制 Menu 控件外觀的某些方面。下面的示例演示如何為許多 Menu 屬性（然后可以在樣式表中引用這些屬性）指定一個 CssClass 屬性。
<asp:menu id="NavigationMenu2"
staticdisplaylevels="3"
orientation="Vertical"
target="_blank"
runat="server"
CssClass="menu2">
<levelsubmenustyles>
<asp:submenustyle CssClass="level1" />
<asp:submenustyle CssClass="level2"/>
<asp:SubMenuStyle CssClass="level3" />
</levelsubmenustyles>
...
請注意，最佳做法是在標記中指定內聯樣式或使用 CssClass 屬性並使用樣式表指定樣式。不建議同時指定內聯樣式和使用樣式表，因為可能會導致意外行為
一、菜單行為和樣式
Menu 控件使用兩種顯示模式：靜態模式和動態模式。靜態顯示意味着部分或全部菜單結構始終可見。完全靜態的菜單顯示整個菜單結構，用戶可以單擊其任何部分。動態顯示意味着當鼠標指針置於某些項上時顯示部分菜單結構；僅當用戶將鼠標指針放置在父節點上時才會顯示子菜單項。
StaticDisplayLevels 屬性指示靜態顯示多少層菜單項。如果有四層菜單項，並且 StaticDisplayLevels 屬性設置為 3，則靜態顯示前三層，動態顯示最后一層菜單項。
若要控制菜單的靜態部分的外觀，可以在名稱中使用包含單詞“Static”的樣式屬性：
·StaticMenuStyle
·StaticMenuItemStyle
·StaticSelectedStyle
·StaticHoverStyle
若要控制菜單的動態部分的外觀，可以在名稱中使用包含單詞“Dynamic”的樣式屬性：
·DynamicMenuStyle
·DynamicMenuItemStyle
·DynamicSelectedStyle
·DynamicHoverStyle
StaticMenuStyle 和 DynamicMenuStyle 屬性分別影響整組靜態或動態菜單項。例如，如果使用 DynamicMenuStyle 屬性指定一個邊框，則整個動態區域將會有一個邊框。
StaticMenuItemStyle 和 DynamicMenuItemStyle 屬性與此行為相反。這兩個屬性影響單個菜單項。例如，如果使用 DynamicMenuItemStyle 屬性指定一個邊框，則每個動態菜單項都有它自己的邊框。
當鼠標指針置於菜單項上時，StaticSelectedStyle 和 DynamicSelectedStyle 屬性僅影響所選的菜單項，而 StaticHoverStyle 和 DynamicHoverStyle 屬性影響菜單項的樣式。
1.1、菜單層
控制菜單項的外觀的另一種方法是單獨設置菜單結構中每層的樣式。Menu 控件具有多個充當樣式集合的屬性，這意味着這些屬性可以包含菜單結構的每層的樣式信息。
可用於指定每層外觀的樣式屬性在其名稱中包含單詞“Level”：
·LevelMenuItemStyles
·LevelSubMenuStyles
·LevelSelectedStyles
下面的示例創建一個四種樣式的集合，這些樣式適用於前四層菜單項，並且可以通過使用 CssClass 值在樣式表中引用。
<LevelMenuItemStyles>
<asp:MenuItemStyle CssClass="Level1Style" />
<asp:MenuItemStyle CssClass="Level2Style" />
<asp:MenuItemStyle CssClass="Level3Style" />
<asp:MenuItemStyle CssClass="Level4Style" />
</LevelMenuItemStyles>
集合中的第一種樣式適用於第一層菜單項；第二種樣式適用於第二層菜單項，依此類推。請注意，層樣式之間不存在任何繼承，以便應用於一個層的樣式不會影響后續層。
下面的示例創建一個三種樣式的集合，這些樣式適用於前三層菜單項，並且可以在樣式表中引用。
<LevelSubMenuStyles>
<asp:SubMenuStyle CssClass="submenulevel1" />
<asp:SubMenuStyle CssClass="submenulevel2" />
<asp:SubMenuStyle CssClass="submenulevel3" />
</LevelSubMenuStyles>
二、菜單樣式常見情況
用於設置 Menu 控件格式的樣式取決於對菜單項的外觀進行控制的程度和位置。例如，如果希望每個菜單項層都有一個一致的外觀，請使用 LevelMenuItemStyles 屬性來設置每個菜單層的樣式。如果希望所有靜態菜單項的外觀都相同，所有動態菜單項的外觀也都相同，則可以使用 StaticMenuItemStyle 屬性來控制所有靜態菜單項的外觀，使用 DynamicMenuItemStyle 屬性來控制所有動態菜單項的外觀。
下面的示例演示創建特定菜單所需的標記和樣式表內容。本示例演示使用 Menu 控件時的一些最佳做法，包括：
在標記中使用 Menu 控件屬性 Font 設置整個菜單的字體。
·通過 WidthMenu 控件屬性設置控件的寬度。
·使用 LevelMenuItemStyles 屬性為每個菜單項層指定樣式。
·在樣式表中使用 !important 聲明重寫菜單的默認字體。
下面的示例提供 Menu 控件的聲明性代碼。
<asp:menu id="NavigationMenu1" CssClass="menu1"
staticdisplaylevels="3"
staticsubmenuindent="0"
orientation="Vertical"
target="_blank"
Font-names="Arial, Gill Sans"
Width="100px"
runat="server">
<LevelMenuItemStyles>
<asp:MenuItemStyle CssClass="level1"/>
<asp:MenuItemStyle CssClass="level2"/>
<asp:MenuItemStyle CssClass="level3" />
</LevelMenuItemStyles>
<StaticHoverStyle CssClass="hoverstyle"/>
<LevelSubMenuStyles>
<asp:SubMenuStyle CssClass="sublevel1" />
</LevelSubMenuStyles>
<items>
<asp:menuitem text="Home" tooltip="Home">
<asp:menuitem text="Section 1" tooltip="Section 1">
<asp:menuitem text="Item 1" tooltip="Item 1"/>
<asp:menuitem text="Item 2" tooltip="Item 2"/>
<asp:menuitem text="Item 3" tooltip="Item 3"/>
</asp:menuitem>
<asp:menuitem text="Section 2" tooltip="Section 2">
<asp:menuitem text="Item 1" tooltip="Item 1"/>
<asp:menuitem text="Item 2" tooltip="Item 2">
<asp:MenuItem Text="Subitem 1"/>
<asp:menuitem Text="Subitem 2" />
</asp:menuitem>
<asp:menuitem text="Item 3" tooltip="Item 3"/>
</asp:menuitem>
</asp:menuitem>
</items>
</asp:menu>
下面的示例是 Menu 控件的 CSS 代碼。
.level1
{
color: White;
background-color: Black;
font-variant: small-caps;
font-size: large;
font-weight: bold;
}
.level2
{
color: Blue;
font-family: Gill Sans MT !important;
font-size: medium;
background-color: Gray;
}
.level3
{
color: black;
background-color: Silver;
font-family: Gill Sans MT !important;
font-size: small;
}
.hoverstyle
{
font-weight: bold;
}
.sublevel1
{
background-color: Gray !important;
color: White !important;
font-variant: small-caps;
}