OK, so we have a basic skin with a menu that doesn't quite do what we want. For example, if you add a few more pages, and sub-pages, and subsub-pages, and then go an hover the mouse, you'll get something like the following:

"So where does the highlight come from?" I hear you cry, "And the bleah grey bit in front of the sub menu items? And the nasty extra bit behind? And the highlight doesn't even line up properly when hovering over the drop-down menu!"

And well may you cry thus. After all, you didn't specify any of these things when you added the solpartmenu control. It's like ordering a hot dog and getting relish even you don't want any. Annoying. So I'm going to start by removing absolutely everything. Which will take a while, so bear with me.

The Root Menu

Let't start with making the root menu presentable. First, so we can see exactly what's going on, we'll add a new CSS class for the main menu container:

.MenuContainer
{
    background-color: Red;
}

Now go and apply thit class to the solpartmenu by setting its CSSContainerRoot property:

<dnn:SOLPARTMENU runat="server" ID="dnnSOLPARTMENU" CSSContainerRoot="MenuContainer" />

(Yes, there is another way, through the MenuContainerCssClass. It seems to make no diffference, and I like the way Visual Web Developer orders the properties by name. By using the CSS... properties, I've got them all in one place, which is handy.)

Now your main menu container will appear bright red - and you'll see the menu arrows that have hitherto been hidden by virtue of being white images on a white background. One more thing to get rid of...

There are two kinds of arrows here: a breadcrumb arrow, indicating that we're on 'Page 3', and submenuindicatorarrows that show up whenever a menu item has a submenu. Well, that explains the trailing space on the sub-menu items. Now, the solpartmenu control has this neat property called UseArrows, which takes either true or false as a value. So, since I've promised to remove everything for starters, I change the control thusly:

<dnn:SOLPARTMENU runat="server" ID="dnnSOLPARTMENU" CSSContainerRoot="MenuContainer"
    UseArrows="false" />

And the result is...

...somewhat disappointing. The UseArrows property only applies to arrows that indicate sub-menus. So those are gone, but both the breadcrumb arrow and the trailing space remain. So, on to another one: the UseRootBreadCrumbArrow property. Again, it takes true or false, so since I don't want it, the control code now reads:

<dnn:SOLPARTMENU runat="server" ID="dnnSOLPARTMENU" CSSContainerRoot="MenuContainer"
    UseArrows="false" UseRootBreadCrumbArrow="false" />

...and with that the last of the arrows is gone.

Next, the annoying grey bit. This is actually the space where page icons go. Each page can have an icon, like in the admin and host menus...

But it's not very attrcative for pages without an icon. This particular bit of the menu is styled through a CSS class, so we're going to add the following to our style sheet:

.MenuIcon
{
    background-color: Fuchsia;
}

Anp apply it to the solpart menu through its CSSIcon property:

<dnn:SOLPARTMENU runat="server" ID="dnnSOLPARTMENU" CSSContainerRoot="MenuContainer"
    UseArrows="false" UseRootBreadCrumbArrow="false" CSSIcon="MenuIcon" />

The result looks as follows for mormal pages and pages with icons:

 

Garish, I know, but good for demonstrating what's what. But since I don't want this to show at all at this stage, I'm going to hide it thought the stylesheet:

.MenuIcon
{
    background-color: Fuchsia;
    /* Hide icon field */
    display: none;
}

There. The icon display is now gone completely.

However, even though we told the menu that we don't want those damn arrows, a cell on the right of each menu item remains to display the bloody things. This cell is controlled by the CSSIndicateChildRoot and CSSIndicateChildSub classes. So, we add a style for these:

.MenuArrow
{
    background-color: Lime;
}

...and tell it to the solpart menu...

<dnn:SOLPARTMENU runat="server" ID="dnnSOLPARTMENU" CSSContainerRoot="MenuContainer"
    UseArrows="false" UseRootBreadCrumbArrow="false" CSSIcon="MenuIcon"
    CSSIndicateChildRoot="MenuArrow" CSSIndicateChildSub="MenuArrow" />

...with the predictably headache-inducing results. Note that the root menu item arrow cells are not displayed at the moment, because they seem to be behaving when you tell them not to appear...

But because I don't want the sub menu arrow cells to appear any more than the icon display, I'm going to hide it them the same way, through the style sheet:

.MenuArrow
{
    background-color: Lime;
    /* Hide arrow field */
    display: none;
}

OK, that's starting to look more like it.

Next: styling the menu items themselves.