MooMenu dropdown menus not displaying in IE

Hi,

I am new to the forum and am really impressed by the interactions I have been reading.

I have looked through the forums for my problem and though I have found many entries I can’t seem to work out how to fix my problem.

Recently the submenus have not been displaying in IE and are hidden by the banner. This a new issue which I thought was fixed by another, but in the last week the issue has represented. FF and Chrome are fine.

I have looked at the template_css.css and the rokmoomenu.css files and made some adjustments to the z-index settings. But I can’t seem to resolve the issue. I am not great at these things so am no even sure if I am doing things right.

I was hoping someone might be able to help me with this odd and new problem. (The submenus are under Membership Services where there are two sub menus.)

URL link is www.wraacreunited.org

Regards,
Elizab3th

I think this is a JS issue.

On <ul>.submenu you use Javascript to remove the overflow:hidden; and do something with the height (set it to auto or something? I don’t know what the script does)… Actually I just looked. The script auto calculates the height and it sets overflow to visible.

Anyway, the JS is updating accordingly in FF/Chrome etc ALTHOUGH not in IE. I’m going to request a mod move this to the JS section since JS is responsible for this behavior. Something is funky with the script. It’s not updating the Javascript. The menu is NOT hiding behind the image. This is not a z-index issue where it’s just hidden behind something. I removed all elements of the page except the menu and it still happened. From there, I watched the Javascript work and saw what values were being assigned.

Good luck.

Edit-The only JS that appears to be working on your script for the dropdown is the opacity setting. The overflow isn’t being changed nor the height.

Hi Ryan,

Thank you for your prompt reply. I very much appreciate it.

When you say you think it is a JS issue…do you mean Jomsocial or Javascript?

It is really odd as everything has been working well for years, then suddenly this started to happen a couple of months ago. I did have it fixed then it happened again last week (or thereabouts). I haven’t changed anything so I am flummoxed as to why it has occurred.

Thank you once again.

Cheers

I do not know what Jomsocial is. Is it a Javascript library? Either way, it’s something to do with the menu code. It’s Javscript probably. I described what the issue was. Going off of that, I believe the Javascript is the issue.

Go in IE and open up the developer console. Select the dropdown menu. Now when you hover over the dropdown on the page, you will see that the height/overflow valuse do not change. Doing that same test on Chrome/FF will result in the values changing - that is the key for the dropdown appearing. IE isn’t doing it. The JS isn’t working on IE. Perhaps when you updated something, you changed something? I’m unsure.

Thanks again Ryan…
I will have to get someone to look at this. I know nothing about javascript and am far from a developer.

Cheers

HI,

Try forcing the issue like this:


.submenu{height:auto!important}

Hi Paul and thank you for taking the time to answer my post.

I have two menus on the front (public) page with drop down menus they are under Home and Membership Services.

When I use IE Inspect Element on either menu, I can see the below line.

<ul class=“submenu” style=“height: 0px; overflow: hidden; opacity: 1;”><li class=“item-21”><a class=“child” style=“position: relative;” href="/index.php?.

When I change height to auto and overflow to visible, in this line, I can see the drop down menu clearly but only for the element I inspect and not the other.

I was wondering if you would be able to suggest what file I need to put your code into for it to affect both/any drop downs, as I have drop down menus also in the site once members log in. BTW It seems I will have to have overflow: visible as well, as I can’t see the drop down without changing that along with height auto.

Thanks again.

A dropdown has this nesting look to it


<ul>
<li top level><a></a>
   <ul dropdown level></ul>
</li>
</ul>

That ul dropdown level for the homepage is .submenu (as your code shows us.) To target once the member logs in, look at the dropdown on that page for the submenu there and see if it has a class/ID to it. If it does, simply change Pauls code to this.


.submenu, .whateverTheLoginDropdownUlIs{height:auto!important}

If there is no class, simply add one in and do what I just did. I do not have login credentials so I can not spoon feed you :).

No need to change the overflow property because once the height is auto there will be nothing to hide.

As Ryan said you just need to target the code to your specific menu if your login code is different. The code I gave you is tested on your live site in IE (via developer tools) and does work to show the menu.

If both menus have the same parent name then you can just target submenus via context.

e.g.


ul.menutop ul{height:auto!important}

Thank you Ryan and Paul…I have had a round of doctor’s appointments hence not getting back here earlier.

JTLYK I have been trying to get hold of the person who usually does this work for me, but have had no luck. Hence coming here to the forum. I don’t generally do this sort of thing as I have no skills with this, further my health lets me down often.

I finished up editing a line in the template_css.css file under group menus. See line below. It seems to work.

#horiz-menu ul {list-style: none;padding: 0;margin: 0; height: auto!important;}

Also JTLYK all drop down menus, included those for logged in members, drop off the menus you can see on the public page.

I hope I have understood your input correctly and thank you once again for your help.

BTW I have looked in the site to see if there is any area where I could engage someone to do work for my site, I didn’t see any. Is this right or have I missed it?

Kind Regards

In the move to discourse (which is imminent) there will be a new jobs category where you can find someone to help.