Dropline/dropdown problem

[samliew]

I have compiled together pieces from different menus at CSS Play.

I started with this menu http://www.cssplay.co.uk/menus/pro_dropline.html. I chose this one because it centers the menu across the parent.

I styled it to look like this menu http://www.cssplay.co.uk/menus/pro_left_right_line.html.

I then added background images to the drop line using the sliding doors technique.

Everything is going good at this point. I then wanted to add a drop down menu to the drop line based on this menu http://www.cssplay.co.uk/menus/pro_line_down_fly.html. This is where things start to go haywire. First of all the dropdown always moves to the far left (all browsers):

http://i284.photobucket.com/albums/ll33/gargamel4670/dropdown.jpg

Beyond that if I force the drop down menu to a position where I can move the mouse on top of it, I get a problem with the drop line as shown here:

http://i284.photobucket.com/albums/ll33/gargamel4670/dropdown2.jpg

Here is the temporary website:
http://members.cox.net/gargamel4670/Navigation.htm

Attached are the files and images involved.

So the two problems are:
1. The drop down menu appears in the wrong place (all the way to the left).
2. When I am hovering over the drop down menu I get the wrong hover images on the drop line.

Any help with this is greatly appreciated.

Thanks!