Text in my main site is obscuring my menu. Help!

HTML & CSS
1

Hello! Please take a look at my flyout menu site: Test Flyout Lists. I am very pleased with it, except for two problems:

  • As you hover over some of the nested items in the menu, (such as Item 3.c), once the mouse happens to move into the other section, the cursor turns into an “I” and the whole menu disappears. The menu shouldn’t disappear until my mouse cursor is away from it no matter which section I’m in. How can I do this?
  • When a menu item overlaps the text section, some of the text creeps through. I want the menu to be totally opaque and completely overlap any content from the other section. How do I do that?
2

Try adding the code in red:

#sidebar {
  background: url("http://home.roadrunner.com/~dstreb/images/blue_gradient.gif") repeat scroll 0 0 transparent;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 200px;
  [COLOR="Red"]z-index: 10;[/COLOR]
}
3

Wow, that worked perfectly! Thanks!