[Plugin: Multi-Level Navigation] Dropline possible?

Hi folks

I’m using the multi-level navigation plugin for the main menu on my mum’s site. I’m trying to make it dropline instead of dropdown, and I can only get so far.

Here’s the link livinglegacies.sunstonemedia.co.nz although I’m working on it so it may not display the right thing at the right moment.

Basically I have 4 parent pages with a number of children. When you hover over the parent link, a dropline does appear, but it appears underneath the link as it would if it were dropdown, rather than to the far left. This means that the first page works fine, but on the subsequent links, the dropline is going off the edge. It’s also not being restricted by the containing div, it is pushing the edge of the page out, bringing up a scrollbar at the bottom.

Hope I’m clear enough about the issue!

What I want is a nice, centred, restricted dropline like this. I can’t just use Stu’s code, as the markup output for the plugin is different. I could of course just have a static menu, but if my mum wanted to add or remove pages, she couldn’t dynamically.

Any thoughts?
Thanks
Charlette

PS. Here is the altered code for styling the plugin:

#suckerfishnav {background:#ffffff;font-size:1.2em;font-family:trebuchet ms, verdana,sans-serif;font-weight:bold; width:100%; float:right;margin:0 auto;}
#suckerfishnav, #suckerfishnav ul {list-style:none;line-height:40px;padding:0;width:100%;text-align:left; margin: 0 auto;}
#suckerfishnav a {display:block;color:#9933cc;text-decoration:none;padding:0px 10px;}
#suckerfishnav li {float:left; padding:0;}

#suckerfishnav ul {position:absolute; left:0;list-style:none;padding:0;width:100%;text-align:center; margin: 0 auto; border-top:2px solid #9933cc;}

#suckerfishnav li li {display:block;height:auto; float:left; padding:0 10px; text-align:center; width:auto;}

#suckerfishnav li li a {padding:4px 10px;	font-size:0.8em;color:#9933cc;}

#suckerfishnav li ul ul {height:auto;width:auto;font-weight:normal;margin:0;line-height:1;}
#suckerfishnav li li:hover {background:#fff;}
#suckerfishnav li ul li:hover a, #suckerfishnav li ul li li:hover a, #suckerfishnav li ul li li li:hover a, #suckerfishnav li ul li li li:hover a  {color:#9933cc;}
#suckerfishnav li:hover a, #suckerfishnav li.sfhover a {color:#007cc3;}
#suckerfishnav li:hover li a, #suckerfishnav li li:hover li a, #suckerfishnav li li li:hover li a, #suckerfishnav li li li li:hover li a {color:#007cc3;}
#suckerfishnav li:hover ul ul, #suckerfishnav li:hover ul ul ul, #suckerfishnav li:hover ul ul ul ul, #suckerfishnav li.sfhover ul ul, #suckerfishnav li.sfhover ul ul ul, #suckerfishnav li.sfhover ul ul ul ul  {left:-999em;}
#suckerfishnav li:hover ul, #suckerfishnav li li:hover ul, #suckerfishnav li li li:hover ul, #suckerfishnav li li li li:hover ul, #suckerfishnav li.sfhover ul, #suckerfishnav li li.sfhover ul, #suckerfishnav li li li.sfhover ul, #suckerfishnav li li li li.sfhover ul  {left:auto;background:#fff;}
#suckerfishnav li:hover, #suckerfishnav li.sfhover {background:#fff;}