Nested lists and IE8

Legacy Tutorials
1

Hi,
Can you help with this problem.

I am trying to integrate a drop down menu into a freeway 6 webpage.

When I run the script below as a standalone script it works fine on all platforms.
When I paste it into a markup item on a freeway page it still works fine on every thing except IE8 and IE9.
The top level menu appears but the the sub menus have vanished completely and do not appear when the mouse hovers over the top level item as they should.
There is obviously some setting in Freeway that is preventing this style
#menu li:hover ul{
display:block;
}
from working.
Can you help, it is very frustrating!
Thanks,
Margaret

#menu li ul{ display:none; } #menu li:hover ul{ display:block; }

Some of my favorite links

_______________________________________________ tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options
2

Hi Margaret,

Do you have this as a page posted somewhere? It will be easier to see what
the surrounding code may be doing to exacerbate the issue with this list
code you’ve sent.

–

–
Ernie Simpson

tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

IE8 and below do not respect the :hover pseudo-class on anything except an A tag. You are not going to get this to work unless you wrap the main menu in a link. The trouble is, this isn’t legal:

<ul>
	<li><a href="#">Main Item
		<ul><li>submenu stuff here</li></ul></a>
	</li>
</ul>

You can’t put a UL inside an A. This is why most CSS-centric menu systems include a polyfill for IE < 9 in JavaScript. You could try this:

// modify your CSS so it's this:

li > ul {
	display: none;
}
li:hover > ul, li.open > ul {
	display: block;
}

// make sure you have prototype.js in your page already, add this to 
// the bottom of the page, wrapped in a conditional comment so only
// IE can see it.
document.on('mouseover', 'li', function(evt, elm){
	if(elm.down('ul')){
		$$('li').invoke('removeClassName', 'open');
		elm.addClassName('open');
	}
});
document.on('mouseout', 'li', function(evt, elm){
	if(elm.down('ul')){
		$$('li').invoke('removeClassName', 'open');
	}
});

I haven’t tested this, but it should work. If you try it and get into trouble, let me see a URL and I’ll try to sort it out.

Walter

On Feb 13, 2014, at 3:05 PM, Margaret Elphick wrote:

Hi,
Can you help with this problem.

I am trying to integrate a drop down menu into a freeway 6 webpage.

When I run the script below as a standalone script it works fine on all platforms.
When I paste it into a markup item on a freeway page it still works fine on every thing except IE8 and IE9.
The top level menu appears but the the sub menus have vanished completely and do not appear when the mouse hovers over the top level item as they should.
There is obviously some setting in Freeway that is preventing this style
#menu li:hover ul{
display:block;
}
from working.
Can you help, it is very frustrating!
Thanks,
Margaret

#menu li ul{ display:none; } #menu li:hover ul{ display:block; }

Some of my favorite links

_______________________________________________ tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options

tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

Hi you can find the freeway version on
http://basicwebservices.co.uk/newalmond/test14.php

I know that I can do the drop down menus with CSS actions but my ultimate aim is to incorporate some php code to be able to vary the menu names.
This has been challenging with CSS actions but I can do it with native html.
Thanks for your time!
Margaret
On 13 Feb 2014, at 20:17, Ernie Simpson wrote:

Hi Margaret,

Do you have this as a page posted somewhere? It will be easier to see what
the surrounding code may be doing to exacerbate the issue with this list
code you’ve sent.

–

–
Ernie Simpson

tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

5

Thanks Walter, I’ll give that a try.
Margaret
On 13 Feb 2014, at 20:17, Walter Lee Davis wrote:

IE8 and below do not respect the :hover pseudo-class on anything except an A tag. You are not going to get this to work unless you wrap the main menu in a link. The trouble is, this isn’t legal:

You can’t put a UL inside an A. This is why most CSS-centric menu systems include a polyfill for IE < 9 in JavaScript. You could try this:

// modify your CSS so it’s this:

li > ul {
display: none;
}
li:hover > ul, li.open > ul {
display: block;
}

// make sure you have prototype.js in your page already, add this to
// the bottom of the page, wrapped in a conditional comment so only
// IE can see it.
document.on(‘mouseover’, ‘li’, function(evt, elm){
if(elm.down(‘ul’)){
$$(‘li’).invoke(‘removeClassName’, ‘open’);
elm.addClassName(‘open’);
}
});
document.on(‘mouseout’, ‘li’, function(evt, elm){
if(elm.down(‘ul’)){
$$(‘li’).invoke(‘removeClassName’, ‘open’);
}
});

I haven’t tested this, but it should work. If you try it and get into trouble, let me see a URL and I’ll try to sort it out.

Walter

On Feb 13, 2014, at 3:05 PM, Margaret Elphick wrote:

Hi,
Can you help with this problem.

I am trying to integrate a drop down menu into a freeway 6 webpage.

When I run the script below as a standalone script it works fine on all platforms.
When I paste it into a markup item on a freeway page it still works fine on every thing except IE8 and IE9.
The top level menu appears but the the sub menus have vanished completely and do not appear when the mouse hovers over the top level item as they should.
There is obviously some setting in Freeway that is preventing this style
#menu li:hover ul{
display:block;
}
from working.
Can you help, it is very frustrating!
Thanks,
Margaret

#menu li ul{ display:none; } #menu li:hover ul{ display:block; }

Some of my favorite links

_______________________________________________ tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options

tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

6

Thanks Walter, the modification of the CSS worked like magic. Really helpful!
Margaret
On 13 Feb 2014, at 20:24, Margaret Elphick wrote:

Thanks Walter, I’ll give that a try.
Margaret
On 13 Feb 2014, at 20:17, Walter Lee Davis wrote:

IE8 and below do not respect the :hover pseudo-class on anything except an A tag. You are not going to get this to work unless you wrap the main menu in a link. The trouble is, this isn’t legal:

You can’t put a UL inside an A. This is why most CSS-centric menu systems include a polyfill for IE < 9 in JavaScript. You could try this:

// modify your CSS so it’s this:

li > ul {
display: none;
}
li:hover > ul, li.open > ul {
display: block;
}

// make sure you have prototype.js in your page already, add this to
// the bottom of the page, wrapped in a conditional comment so only
// IE can see it.
document.on(‘mouseover’, ‘li’, function(evt, elm){
if(elm.down(‘ul’)){
$$(‘li’).invoke(‘removeClassName’, ‘open’);
elm.addClassName(‘open’);
}
});
document.on(‘mouseout’, ‘li’, function(evt, elm){
if(elm.down(‘ul’)){
$$(‘li’).invoke(‘removeClassName’, ‘open’);
}
});

I haven’t tested this, but it should work. If you try it and get into trouble, let me see a URL and I’ll try to sort it out.

Walter

On Feb 13, 2014, at 3:05 PM, Margaret Elphick wrote:

Hi,
Can you help with this problem.

I am trying to integrate a drop down menu into a freeway 6 webpage.

When I run the script below as a standalone script it works fine on all platforms.
When I paste it into a markup item on a freeway page it still works fine on every thing except IE8 and IE9.
The top level menu appears but the the sub menus have vanished completely and do not appear when the mouse hovers over the top level item as they should.
There is obviously some setting in Freeway that is preventing this style
#menu li:hover ul{
display:block;
}
from working.
Can you help, it is very frustrating!
Thanks,
Margaret

#menu li ul{ display:none; } #menu li:hover ul{ display:block; }

Some of my favorite links

_______________________________________________ tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options

tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options