How To: Manupilate SharePoint:AspMenu control (Style-wise)

Question

What I want to do is to split-up the globalnavigation bar on the sharepoint 2010 so I can control what menu-items should be floated to the left or right of the bar.

Is there a way to do this without a complete customized version of it, so I only have to edit the current one. Or do I actually have to make a complete new one?

What I have tried so far is just copying all of the UL > LI's there's used to display the menu-items like this:

<div class="s4-tn">
    <div class="menu horizontal menu-horizontal">
        <ul class="static">
            <li class="static dynamic-children">
                <a href="#" CssClass="static dynamic-children menu-item">
                    <span class="additional-background">
                        <span class="menu-item-text">Custom Dropdown</span>
                    </span>
                </a>
                <ul class="dynamic">
                    <li class="dynamic">
                        <a href="#" class="dynamic menu-item">
                            <span class="additional-background">
                                <span class="menu-item-text">Test subsite</span>
                            </span>
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>

But it doesn't seem to trigger the dropdown functionality. Might just be a naive attempt.

Any links to guides or tutorials about this subject would be a great help.

Answer 1

For future reference, here's the content from the linked blogpost.

This uses an asp:Repeater instead of a sharepoint:AspMenu as the former allows much cleaner html and better styling. Also I've created several datasources on the masterpage which return the correct items I need to display.

<asp:Repeater ID="TopMenu" runat="server" DataSourceID="selectedSiteMap">
        <HeaderTemplate>
            <ul id="main_menu_ul" class="">
        </HeaderTemplate>
        <ItemTemplate>
            <li><a href="<%# Eval("Url")%>" class="link">
                <%# Eval("Title")%></a></li>
        </ItemTemplate>
        <FooterTemplate>
            </ul>
        </FooterTemplate>
    </asp:Repeater>
    <asp:SiteMapDataSource SiteMapProvider="CombinedNavSiteMapProvider" ShowStartingNode="false"
        StartFromCurrentNode="false" StartingNodeOffset="0" StartingNodeUrl="sid:1002"
        EnableViewState="true" ID="selectedSiteMap" runat="server" />

I found out which datasources to use with a little help of this post: http://ktskumar.wordpress.com/2008/04/14/sharepoint-navigation-providers-part-1/ They are listed for SharePoint 2007, but most work for 2010 also.

Using several repeaters and datasources on the page you can create a very clean menu. Along with some javascript and css styling you can create every menu you want.