Question

I am using a standard css vertical navigation menu that uses “:hover” to show the sub menu. The menu is done using standard “ul” and “li” elements. The menu is on the left hand side of the page, and when you hover over a menu, it pops out the sub menu to the right of it.

My question is, the sub menu that pops out, is there a way to make it full screen height?

UPDATE

here is a very easy sample:
http://jsfiddle.net/NuAWQ/1/

All the surrounding html/css has been removed so that all you can see is the menu.

UPDATE

I have now managed to do this by using jQuery. The jQuery is:

$('ul > li > ul').css('height', $(window).height() + 'px');

http://jsfiddle.net/NuAWQ/2/

Answer 1

This gave the intended result.

$(‘ul > li > ul’).css(‘height’, $(window).height() + ‘px’);

However, also see Roddy’s additional answer if you wish to align the child elements with the parent element.