css drop down overflow help

I have this css tricked out drop-down menu that drops down when you hover above it, but I have two problems I see with it.

1) The over flow is under the main menu, but I want it to still above it when I drops! How can I fix this issue?

2) There is a couple pixels on the left side of the drop-down when you run your mouse over the links inside of it, how do I fix this?

Thanks for your time! Here is a live link to the demo version! Demo Link

 

For the first point, try and set a high z-index on the popup menu to see if that puts it on top.

 

I just set a z-index on the class "blogroll" to 10 via Firebug and that sets it above the mid nav fine.

 

Thanks, I set the z-index to 10 and it sets it above the mid nav but just a little.

 

Anymore help with this would be great! I am still stuck with getting it to over lap the mid menu!

Thanks,
Adam

 

Maybe set the z-index to something crazy high, like 500? I had to do that once for a drop down...

 

I think I have tried every number possible.

Adam

 

I would say it's more to do with a height being set somewhere on that popup menu div rather than it sitting below the other content. If you remove the content within the "wrapper" div below, the popup menu still shows the same. Saying that, I've been through your css and disabled JS also but can't seem to find where it would be...

 

Alright thanks for the tip! I will have a look around and see what I can find!

Thanks,
Adam

 

After playing with it for a little bit I discovered that it has something to do with the divs its inside of! When I copied and pasted that same code on top to the bottom and added a couple of breaks I was able to see the bottom.

Demo

I looked for a height setting and didn't find anything! The css is what controls the dropdown on hover there is no javascript to make this work!

Here is the blog I got the idea and script from! Pro Blog Design

 

you can use javascript