css mega menu in action

I have created a CSS Megamenu based on several examples on the web. Here it is:
http://tl.cardinalcreek.org/index.php/home.html

To see the CSS mega menu, hover on the text at the lower side of the top image: Home - My Association - My Community - My News - My Membership - My Contacts - Site Map.

It is not nice looking for now, and there are still problems with it, as this is the first time ever that I use CSS.
Problem 1: page content overlaps on top of the menu
Problem 2: the menu disappears when I move the mouse to select a sub menu option

Can someone help me with these two problems? Thank you.

Try to add ".header .inside { z-index:99999; }" to your style sheet.

It seems to me because body of menu is into the header section, but the another parts is out of there, if you place picture in the header section under menu, you will increase height of header section and the second problem would be solved.
P.S. pardon
#megamenu .container_6
{ z-index: 999;
}
is better solution

And to top it off with two additional solutions to Akhmet's:

1. Add a z-index to .inside and #main, #main being lower:
   #main { z-index: 10; } .inside { z-index: 11; }[/*:m:39voocy7]
2. Remove position: relative from #main and .inside.[/*:m:39voocy7]

This solution works:

Code:

---

#megamenu .container_6 { z-index: 999; }

---

I have not tried the other proposed solutions.

Thank you!

Quote:

---

Originally Posted by mouton

I have created a CSS Megamenu based on several examples on the web. Here it is:
http://tl.cardinalcreek.org/index.php/home.html
Can someone help me with these two problems? Thank you.

---

I am sorry, mouton, can you replace the link? It's seems to be broken... :|
I wonna see you megamenu)