The main problem seems to be that you <ul> is not wide enough. The <a> links are set to width: 100%, but they also have 1em right and left padding, making them wider than the <ul>. The <a>s have a bottom white line, which makes the menu appear to have the corrdct width, as the white lines fill the column; BUT, they are actually hanging outside the <ul>. So when you hover over a link, the popups are sitting right beside the parent <ul>.
SO: you need to change the width of the <ul> so that it will actually fill the column, and then reduce the width of the <a>s to account for the padding (because padding is added to overall width, making the <a>s more than 100%.
I've had a bit of trouble testing the changes from my end, hence I can't post the actual code you should use. The widths are all mixed up anyway: ems and %s, which doesn't help.
I hope these suggestions can set you in the right direction. Otherwise, I'm sure someone with a better eye will post some code.