Overlap issue in IE 6 with Nice Menus module

I gave up the nicemenus CSS/JS and developed a new scheme that works with IE6, IE 7 etc.
It is available in alpha release for books. Menus and taxonomy terms will follow shortly.
I hope it helps with your theme:

http://drupal.org/node/44601

This seems like a good module for collaboration. It probably makes sense to standardize the css and combine these two modules. I've had problems with Nice Menus also in Civicspace themes that z-index changes don't seem to help. It would be great to have code that worked across browsers.

Yup, a consolidated solution that works for most of the latest browsers would be good. Or at least some instructions from those who've successfully modified Nice Menus to work with IE. Anyone able to help out here?

I will return to this issue in mid-march. I need to scare up some money to pay my local css expert to clean up and simplify the usability of the css files.

would this help: http://www.cssplay.co.uk/menus/dd_valid.html

It's Stu Nichols' cross-browser drop-down menu using only css...

The following code changes fixed a similar issue for me (submenus were falling under my content divs).

First, place the following at the very end of nice_menus.css

ul.nice-menu, 
ul.nice-menu ul {
   width: 150px;
   position: relative;
   position: absolute;
   z-index: 100;
}

And it has to be followed by

ul.nice-menu-down {
  float: left;
  width: 100%;
  border: 0;
}

I don't know exactly why this works, but it forces IE to keep the menus on top of other divs.

I just realized the fix above stretches the window out in Firefox, causing the bottom scroll bar to appear.

It can be fixed by setting ul.nice-menu-down width to 75%, but I'm looking into why this happens...

Allright...

I've consolidated/changed these lines from the CVS:

ul.nice-menu,
ul.nice-menu ul{
  position: absolute;
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid #ccc;
  z-index: 5;
}

...

ul.nice-menu ul{
  position: absolute;
  top: 1.8em;
  left: -1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin-right: 0;
  display: none;
}

to

ul.nice-menu,
ul.nice-menu ul{
  list-style: none;
  padding: 0;
  margin: 0;
  * position: absolute; /* The * hides this line from non-IE browsers */
  z-index: 5;
}

ul.nice-menu ul{
  position: absolute;
  border-top: 1px solid #ccc;
  display: none;
  width: 150px; 
}

And it is working as I want it to in both Mozilla and IE.

ul.nice-menu-down {
  float: left;
  border: 0;
}

Has to follow these lines, and a "width" statement isn't necessary here.
I haven't tested this in browsers other than IE 6 and Firefox 1.5, but will tomorrow.

I'd meant to post the above as a response to

"down" menu in IE

not in this issue...

Should I repost it there? Anyone care?

I've tried the advice from this thread, but no luck. Attached image shows my nice-menu. The cursor is over Topic 1, and you should see subtopic 1-a and subtopic 1-b beneath, but they are obscured by the first block in the left sidebar.

Any ideas?

The above also did not work for me.

I fixed this problem for my specific site layout (pure CSS based) this way:

in nice_menus.css the first thing you can see is:

.block-nice_menus {
line-height: normal;
font-size: normal;
/*position: relative;*/
z-index: 10;
}

and I just change it to:

.block-nice_menus {
line-height: normal;
font-size: normal;
* position: absolute;
z-index: 10;
}

comment:

z-index property is the answer, but z-index only works on elements that have been positioned, so I added the "Win IE only" position:absolute

you can also uncomment the deafult position:relative line in the css accordingly with your layout

good look to those people using nice_menus, they are really nice ;-)

No longer supporting 4.7. Closing.