I am having the following problem. When using a vertical solpart menu, I haven't been able to figure out how to align the submenu with the root menu. In the example to the right - I would want the submenu to align vertically with the root level menu that's generating it (in this case 'About Us'). How do I get the submenu to be at the same level as the green line in this image (which I added after taking the screenshot)?

Here are my CSS elements for the menu:
/* Menu-Styles */
.ActiveRootTab TD {
background-image: url(images/marble_menu_bkgd.jpg);
background-repeat: repeat-y;
width: 160px;
color: #6D0101;
font-family: verdana;
font-size: 11px;
font-style: normal;
padding-left: 5px;
height: 20px;
background-color: #c3ddfd;
border-top: #FFFFFF 1px solid;
border-bottom: #FFFFFF 1px solid;
border-left: #FFFFFF 1px solid;
border-right: #FFFFFF 1px solid;
}

.RootTab TD{
background-image: url(images/marble_menu_bkgd.jpg);
background-repeat: repeat-y;
background-color: #c3ddfd;
width: 160px;
color: #4d535b;
font-family: verdana;
font-size: 11px;
height:20px;
padding-left: 10px;
border-top: #FFFFFF 0px solid;
border-bottom: #FFFFFF 1px solid;
border-left: #FFFFFF 1px solid;
border-right: #FFFFFF 1px solid;
}

.SelectedRootTab TD{
font-family: verdana;
font-size: 11px;
font-style: normal;
color: #fafafa;
height: 20px;
width: 160px;
border-top: #FFFFFF 0px solid;
border-bottom: #FFFFFF 1px solid;
border-left: #FFFFFF 1px solid;
border-right: #FFFFFF 1px solid;
}

.BreadcrumbRootTab TD{
font-family: verdana;
font-size: 11px;
font-style: normal;
color: #6D0101;
background-color: #c3ddfd;
width: 160px;
border-left: #ffffff 1px solid;
border-right: #ffffff 1px solid;
padding-left: 5px;
}

.MainMenu_MenuContainer {
background-color: transparent;
padding-bottom: 0px;
border-top: #FFFFFF 1px solid;
border-bottom: #FFFFFF 0px solid;
border-left: #FFFFFF 0px solid;
border-right: #FFFFFF 0px solid;
}

.subMenu_MenuContainer {
background-color: #6D0101;
padding-bottom: 0px;
border-top: #FFFFFF 0px solid;
border-bottom: #FFFFFF 0px solid;
border-left: #FFFFFF 0px solid;
border-right: #FFFFFF 0px solid;
}

.MainMenu_MenuBar {
cursor: default;
}

.subMenu_MenuBar {
cursor: default;
height: 16px;
width: 760px;
}

.MainMenu_MenuItem {
background-color: #FFFFFF;
cursor: pointer;
cursor: hand;
color: #666666;
font-family: verdana;
font-size: 11px;
font-style: normal;
height: 20px;
}

.subMenu_MenuItem {
background-color: transparent;
cursor: pointer;
color: #FFFFFF;
font-family: verdana;
font-size: 11px;
font-style: normal;
height: 16px;
}

.MainMenu_MenuItemSel {
background:#c3ddfd;
cursor: default;
color: #87001B;
font-family: verdana;
font-size: 11px;
font-style: normal;
border-top: #6D0101 1px solid;
border-bottom: #6D0101 1px solid;
}

.subMenu_MenuItemSel {
background:#6D0101;
cursor: default;
color: #BBE1EF;
font-family: verdana;
font-size: 11px;
font-style: normal;
border-top: #6D0101 0px solid;
border-bottom: #6D0101 0px solid;
}

.MainMenu_SubMenu {
z-index: 1000;
cursor: default;
background: #6D0101;
filter: none;
border: 1px solid #6D0101;
margin-top: 2px;
padding: 0px;
}

Okay, now I feel dumb.

I stared at that CSS and went over and over it looking for something like that - thinking was a padding issue or something. I guess I'd already been working on too much code and my brain was looking for something more complicated. Always good to have someone look at your code with a fresh pair of eyes.

Thanks for the embarrassingly simple fix. It's all good now.