Opencart Template IE 10 Menu Error

rwalker wrote:Copying the code into the common.js worked...... Kinda.

I am using 1.5.1 . The sub categories will show but then when scrolled back over they go back to the original nub

Anyone else see this?

Chris_AXA wrote:It has to do with the CSS not the Javascript.

Code: Select all

#menu > ul > li:hover > div {
	display: table;
}
#menu > ul > li > div > ul {
	display: table-cell;
}

change it to

Code: Select all

#menu > ul > li:hover > div {
	display: block;
}
#menu > ul > li > div > ul {
	display: block;
}

This fixed it for me without changing the Javascript. I'm guessing IE 10 doesn't like display: table;

eWarrior wrote:

avantprime wrote:I have had a go an it seems IE10 needs the same fix as IE7.

Nice work posting a fix, but is there any reason why you didn't just use the OR operator?

Rather than repeating the same function, I simply changed...

Code: Select all

if ($.browser.version <= 7) {

To...

Code: Select all

if ($.browser.version <= 7 || $.browser.version == 10) {

Either way, both solutions seem to fix this issue.

Chris_AXA wrote:It has to do with the CSS not the Javascript.

Code: Select all

#menu > ul > li:hover > div {
	display: table;
}
#menu > ul > li > div > ul {
	display: table-cell;
}

change it to

Code: Select all

#menu > ul > li:hover > div {
	display: block;
}
#menu > ul > li > div > ul {
	display: block;
}

This fixed it for me without changing the Javascript. I'm guessing IE 10 doesn't like display: table;

Chris_AXA wrote:It has to do with the CSS not the Javascript.

Code: Select all

#menu > ul > li:hover > div {
	display: table;
}
#menu > ul > li > div > ul {
	display: table-cell;
}

change it to

Code: Select all

#menu > ul > li:hover > div {
	display: block;
}
#menu > ul > li > div > ul {
	display: block;
}

This fixed it for me without changing the Javascript. I'm guessing IE 10 doesn't like display: table;

barron22 wrote: This worked for me however broke the multiple coloumns in the dropdown menu, is there anyway to reimplement multiple columns?

#menu > ul > li > div > ul {
	display: table-cell;
}

#menu > ul > li > div > ul {
	display: inline-block;
}