How to properly position 3rd level menu

[Neorvfgq]

If you look here under "About ISL" -> "Board of Trustees" you can see I have created a third level dropdown, but how can I properly align that drop down? Below you will see my css. \[code\]#menudiv { width: 999px; float: left; clear: left; height: 250px; background: url(images/top_bg.png) no-repeat; margin-top: 10px;}#mainmenu { width: 948px; height: 63px; float: left; margin-left: 16px; margin-top: 5px; border: 1px solid #D5D5D5; -moz-border-radius: 3px; -webkit-border-radius: 3px; -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.1); -moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.1); background: url(images/nav_bg.gif) repeat;}.mainnav { margin: 0; padding: 0; list-style: none;}.mainnav * { margin: 0; padding: 0; list-style: none;}.mainnav ul { position: absolute; top: -999em; display: none;}.mainnav li { float: left; position: relative; z-index: 999; height: 63px; line-height: 55px; margin-right: 0px; border-right: 1px solid #D5D5D5;}.mainnav li.last { border-right: none;}.mainnav a { display: block; font-size: 19px; margin: 0; color: #cc9900; font-family: Copperplate,Arial,Helvetica,Sans serif; font-weight: 600; text-decoration: none; padding: 3px 13px 3px 12px; color: #555; text-shadow: 0 1px 1px white;}.mainnav li:hover { text-decoration: none; border-bottom: solid 0px #ccc; background: white;}.mainnav ul li { width: 132px;}.mainnav li:hover ul,ul.mainnav li.sfHover ul { left: 0px; top: 50px; padding-top: 0px; width: 132px; border-bottom: solid 0px #eaeaea; background: url(images/nav_dropdown_shadow.gif) repeat-x top; padding: 6px 0 0px 0px; margin: 13px 0 0 -1px; border: 1px solid #D5D5D5; -moz-border-radius-bottomleft: 3px; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-bottomright: 3px; -webkit-border-bottom-right-radius: 3px; -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.1); -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.1); width: 175px; border-bottom-left-radius: 3px 3px; border-bottom-right-radius: 3px 3px;}.mainnav li:hover li ul,.mainnav li.sfHover li ul { top: -999em;}.mainnav li li:hover ul,ul.mainnav li li.sfHover ul { left: 132px; top: -8px;}.mainnav li:hover ul,.mainnav li li:hover ul { top: -999em;}.mainnav li li { color: #555; display: block; padding: 0px; height: auto !important; border: none; width: 175px; background: url(images/nav_dropdown_bg.gif) repeat; margin: 0;}.mainnav li li a:link,.mainnav li li a:visited { display: block; height: auto !important; line-height: 30px; color: #333; font-weight: normal; font-family: arial,helvetica,sans-serif; font-size: 12px; border: none; margin: 0; padding-left: 10px; overflow: hidden; border-bottom: 1px solid #E3E3E3;}.mainnav li li :hover {}.mainnav li li a:hover { background: none; color: #555 ; border-bottom: 1px solid #E3E3E3;}\[/code\]The problem is that the \[code\]ul.sub-menu li ul.sub-menu\[/code\] is too far to the left and is covered by its parent. How can I fix the right alignment of these \[code\]ul\[/code\] elements?