Vertical flyout menus in SharePoint 2010

Introduction:
Here in this article we will discuss how to create a vertical flyout menu in SharePoint 2010 by using SharePoint:AspMenu control. You can also check out some SharePoint Master page and Page Layout articles.

Description:
Most of the SharePoint web sites are using flyout menus either horizontal or vertical. If you want to make a vertical menu like below figure then we need to follow the below steps.

Steps-1:
I have already explained about SharePoint 2010 flyout menus in SharePoint 2010. Open that link and follow all the steps from there. And then follow Step-2 for further changes.

Step-2:

After following Step-1, We need to do a small change in the AspMenu. The existing code will look like below:

<SharePoint:AspMenu ID="TopNavigationMenuV4" runat="server" EnableViewState="false"
                                    DataSourceID="topSiteMap" AccessKey="<%$Resources:wss,navigation_accesskey%>"
                                    UseSimpleRendering="true" UseSeparateCSS="false" Orientation="Horizontal" StaticDisplayLevels="2"
                                    MaximumDynamicDisplayLevels="4" SkipLinkText="" CssClass="s4-tn"/>

Here the Orientation attribute is Horizontal like Orientation="Horizontal". Now change that to Vertical like Orientation="Vertical".

So now your full code should look like below:

<SharePoint:AspMenu ID="TopNavigationMenuV4" runat="server" EnableViewState="false"
                                    DataSourceID="topSiteMap" AccessKey="<%$Resources:wss,navigation_accesskey%>"
                                    UseSimpleRendering="true" UseSeparateCSS="false" Orientation="Vertical" StaticDisplayLevels="2"
                                    MaximumDynamicDisplayLevels="4" SkipLinkText="" CssClass="s4-tn"/>

You can also check SharePoint 2010 flyout menus in SharePoint 2010.