CSS Submenu goes off page

[april_lee]

The last menu item's submenu's submenu from my CSS goes off the page so that the user has to move the scroll bar over in Internet Explorer (and by that time the submenu is gone because the user has clicked off the submenu item). Please let me know what setting I need to adjust to fix this. Thanks!

Here's my code (mostly from sprymenubarhorizontal.css) -
ul.MenuBarHorizontal
{

padding-left: 150px;
margin: 0;
height:40px;
background:#8CAFBF;
width:100%;
float: none;
font-family:"Trebuchet MS",Arial,Verdana,Helvitica,sans-serif;
display: inline-block;
}


ul.MenuBarActive
{
z-index: 1000;
}

ul.MenuBarHorizontal li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
cursor: pointer;
width: 70px;
float: none;
background-color: #33FF00; border: 0.1em solid #8CAFBF;
line-height: .8em;
display: inline;
}

ul.MenuBarHorizontal li a
{
/*background: url(background.gif) #fff bottom left repeat-x;
height: 2em;
line-height: .75em;
float: left;
width: 10em;
display: block;
border: 0.1em solid #dcdce9;
color: #0d2474;
text-decoration: none;*/
padding: 3px 12px 3px 12px;

text-align: left;
}

ul.MenuBarHorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8em;
position: absolute;
left: -1000em;
display: inline;

}

ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
left: auto;
}

ul.MenuBarHorizontal ul li
{
width: 8em;
}

ul.MenuBarHorizontal ul ul
{
position: absolute;
margin: 5% 0 0 50%;
}


ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
left: auto;
top: 0;
}




ul.MenuBarHorizontal ul
{
border: 1px solid #CCC;
background-color: #8CAFBF;
}

ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
background-color: #8CAFBF;
padding: .15em .85em;
color: #333;
text-decoration: none;

white-space: nowrap;
}

ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
background-color: #8CAFBF;
color: #FFF;
white-space: nowrap;
width: auto;
}

ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
background-color: #8CAFBF;
color: #FFF;
}

[BLiZZaRD]

Do you have a link to the problem page? Would be better to see first hand and see if there is something other than the menu to fix and solve this :D

[april_lee]

I wish I could, but the page is on an intranet site and can't be viewed without an account. I basically need the submenu to stay within the margin so that when expanded out Admin - A&A Office - Edit Due Dates does not get cut off so that all you see is "Edit Du".

[BLiZZaRD]

Okay, well without looking, I can suggest changing the top margin/padding of the last menu to a negative (or smaller positive) value.

I assume your menu opens to the right and the top choice of the sub-menu is at the top of the section of the main menu where it was moused over or clicked.

For the last, problematic submenu, changing it so that the bottom choice is aligned with the cursor might be your ticket.

If that makes sense.

[sandare]

hi the code for april_lee above has some issues with aligning the menu to the left.. well, basically u have to make two changes as follows:

1st. on top

ul.MenuBarHorizontal
{

padding-left: 150px;

Reduce the size of "padding-left" to small number probably for one or two digits number (eg. 0px)

and secondly in middle
ul.MenuBarHorizontal ul ul
{
position: absolute;
margin: 5% 0 0 50%;
}

change the 'margin:' to -5% 0 0 95%;..

Hope this works fine for you ...