I successfully deployed the accordion menu however I am having a slight problem with the link titles running over onto the page. The odd thing is I have several link titles which are just as if not longer and the system appears to be creating line breaks for those. Why is it doing it for those and not others? Is there some parameter I can use to ensure this? Thanks in advance.

Hi,

You will find that within the default CSS supplied with the menu that it has a fixed width which is probably the main cause for what you are experiencing.

Have you altered any of the CSS or is it still the default?

Is it possible to see your site as we can possibly offer a suggestion as to what to alter to fix the issues you are seeing

Many Thanks.

Below is the "default css", I attempted to change the width but it had no effect on the appearance.

the site is www.ecostewardsalliance.org

/* Warning - Editing below can break the script */
html.accordion-menu-js dd.a-m-d{
display:none;
}

html.accordion-menu-js dd.a-m-d-expand {
display:block;

}

html.accordion-menu-js dd.a-m-d-before-expand {
display:block;
position:relative;
z-index:-1;
/* opacity:0;*/
height:auto !important;
visibility:hidden;
overflow:visible;
}

html.accordion-menu-js dt.a-m-t-expand {
}

html.accordion-menu-js dd.a-m-d-anim {
overflow:hidden;
display:block;
}


dl.accordion-menu dd.a-m-d .bd{

}

#sbdhidden { display:none; }
/* Warning - Editing above can break the script */

/* Editable section below */

dl, dt, dd { width: 180px; margin: 0; padding: 0; list-style-type: none;}
dl.accordion-menu dt { color: #000000; font-size: 10px; font-weight: bold; height: 20px; line-height: 18px; border-bottom: 2px dotted gray; /*white-space: nowrap;*/ }
dl.accordion-menu dt:hover { color: #003366; font-size: 10px; cursor: pointer; display:block; }
dl.accordion-menu dt a { color: #000000; font-size: 10px; text-decoration: none; }
dl.accordion-menu dt a:hover { color: #003366; font-size: 10px; }

dl.accordion-menu dd { /*line-height: 12px;*/ padding-left: 10px; }
dl.accordion-menu dd a { color: #000000; font-size: 11px; text-decoration: none; display: block; }
dl.accordion-menu dd a:hover { color: #003366; }

span.rollmainlevel{ cursor: pointer; }


/* Example CSS to control active menu/submenu a link */
#active_roll_menu{ color: #ff0000; }
a:hover#active_roll_menu { color: #f500f5; }

/* Example CSS to override CSS for top level expanded menu */
#activeparent_roll_menu{ color: #00ff00; }


dt.active_top_menu{ background-color: green; }

thanks again

Hi,

From a quick look it looks like you are fighting various CSS settings between the template and the menu.

If you alter the menu CSS to a minimum width of 168px in the dl, dt, dd section this should sort out your wrapping of the text.

The running on to the main page is more awkward however. If you can alter the template you could try increasing the width of the left column, otherwise you could try one or more of the following to see whether it brings you menus back into the left hand column.

If you alter the menu CSS from:



To



You will notice it shifts all the sub menu text to the left, playing with the value slightly may help bring it back in line.

Another option is to reduce the text size for the menu links slightly, try reducing them to the next size down - most of the menu is either 13px or 11px, try dropping these down to 12px or 10px.

Hope this may help.

Many Thanks