Popup Menu

This code file appends two Javascript functions to all LI tags with UL child elements belonging to a UL tag with ID of ‘PopupMenu’. One of these functions will operate when the mouse moves over an LI element setting the child UL to display, the other works when the mouse moves out of the LI hiding the child UL. To see how a sample menu would work (including sub UL’s, A tags and style) download this file and look at the style sheet and menu for this site.

PopupMenu.js

Note that I only use this for Internet Explorer as CSS Popup Menus are much nicer and work fine with CSS2 complient browsers like FireFox, Opera or Safari. Have a look at Eric Meyer’s website for a good example of a CSS Popup Menu (or look at my style sheet). The key elements for a sideways (right) popup menu are shown below.

ul {
	list-style-type: none;
	margin:0;
	padding:0;
	width:8em;
}

ul li {
	position: relative;
}

li a {
	display: block;
}

li:hover > ul {
	display: block; 
}

li ul { 
	position: absolute;
	top:0;
	left: 7.95em; 
	display:none;
}

If you are looking at the > selector in confusion, it simply means only the first direct decendant ul.