Question

I’ve created a skin which uses solpartmenu. On a portal that uses submenus, I’m getting different behavior in different browsers: On IE and Firefox, the submenus drop down just below the parent items, as I would expect. However on Safari and Chrome, the appear on the far left of the page. I didn’t think I was doing anything too weird with my CSS, but I seem to have missed something. An example is here: http://www.codeswell.com/tpabuilders. I’ve added my solpartmenu styles below. I can add the complete skin code/CSS, if need be.

Can anyone shed some light on this?

/* SolPartMenu styles */

.MainMenu_MenuItem 
{
    cursor: pointer;
    background-color: White;
    color: #006309;
    font-family: Times New Roman;
    font-size: 14px;
    font-weight: bold;
}

.MainMenu_RootMenuItemActive
{
    text-decoration: underline;
}

.MainMenu_RootMenuArrow 
{
    display: none; 
}

.MainMenu_MenuIcon
{
    width: 0px; 
    height: 0px;
}

.MainMenu_MenuArrow 
{
    display: none; 
}

.MainMenu_MenuItemSel
{
    cursor: pointer;
    background: White;
    color: Maroon;
    font-family: Times New Roman;
    font-size: 14px;
    font-weight: bold;
}

Answer 1

I would recommend trying to set an explicit width on the menu items. I noticed in Chrome it is saying that the width of the sub-menu items is around 1600px – which would be why it is pushed so far over.

Also, I feel like I have to say this, I wouldn’t recommend using the SolPartMenu for your DotNetNuke navigation. There are much better alternatives out there. You’re going to keep having headaches with the SolPartMenu and from my experience its just not worth it.

• DNN Menu (Now the core menu) (some documentation)
• House Menu (free)
• Telerik RadMenu (commercial)