3 replies [Last post]
Last seen: 16 years 30 weeks ago
Joined: 2005-06-28
Posts: 2
Points: 0

Hi guys,

I have been trying to modify a two level deep CSS Drop down menu system from A List Apart into a Three Level Deep one with little success.

I feel like I've almost got, it but it's just avoiding me. I have an unordered list which I've named: #Test (Is located on the Infertility line), that I need to "popup" again when I rollover it, but for some reason all I can get the block to be is invisible, which is only half of what I need.

I think that the problem is coming in on the line:

#Nav ul li#Miracle ul li #Test li:hover ul, #Test li.over ul { 
	display: block;

And I have tried many variations on the above theme with no luck, and I am really starting to pull my hair out. I would really appreciate it if someone could help me figure out what is going on.

I have put the page up on:


Thanks, any help would be really appreciated.

Phrozt's picture
Last seen: 17 years 29 weeks ago
Joined: 2004-07-08
Posts: 39
Points: 0

3 Level Deep Menu

first thing's first... here's all your menu style code:

/* Styles for Menu Items */

#Nav ul li a {
	display: block;
	text-decoration: none;
	color: #fff;
	padding: 5px;
	border: 1px solid #ccc; /* IE6 Bug */
	border-bottom: 0;

#Nav ul li#CT a {background: #6CADBC; /* IE6 Bug */ }
#Nav ul li#Home a { background: #C1C104; /* IE6 Bug */ }
#Nav ul li#Search a { background: #F6C724; /* IE6 Bug */ }
#Nav ul li#Miracle a { background: #FF6600; /* IE6 Bug */ }	
#Nav ul li#Pregnant a { background: #7DA637; /* IE6 Bug */ }
#Nav ul li#Births a { background: #FF00FF; /* IE6 Bug */ }	
#Nav ul li#Pamper a { background-color:#311C84; /* IE6 Bug */ }
#Nav ul li#Shopping a { background: #00CCFF; /* IE6 Bug */ }
#Nav ul li#Entertaining a { background: #FF0000; /* IE6 Bug */ }
#Nav ul li#Healthy a { background: #FFCC00; /* IE6 Bug */ }
#Nav ul li#Loveme a { background: #FA6689; /* IE6 Bug */ }
#Nav ul li#Chat a { background: #E7A300; /* IE6 Bug */ }	
#Nav ul li#Special a { background: #8E67B9; /* IE6 Bug */ }
#Nav ul li#Checklist a { background-color:#FF9900; /* IE6 Bug */ }
#Nav ul li a:hover { 
	text-decoration: underline;
	background-color:#00CCFF; /* IE6 Bug */

as for your 3 layer menu.. check this out: http://www.positioniseverything.net/css-flyout.html

Last seen: 16 years 30 weeks ago
Joined: 2005-06-28
Posts: 2
Points: 0

Getting There, but IE's causing trouble

Thanks for the streamlined code, much nicer! Laughing out loud

I was playing around with the CSS and I got it to work in Firefox, but of course IE isn't working, but I am sure that the problem is with the Javascript because this was a problem with IE on the original List Apart article.

I know that there is another option available but I feel like I am so close with this one, that it seems a shame to give up now.

Here is the Javascript, if you have any suggestions I would really appreciate it:

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("menu");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");

function MM_jumpMenu(targ,selObj,restore){ //v3.0
  if (restore) selObj.selectedIndex=0;


Chris..S's picture
Last seen: 9 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

3 Level Deep Menu

this might not help much, but then again it might Smile

Check out http://www.xs4all.nl/~peterned/csshover.html
for a generic solution to add a lot of :hover functionality to IE. This should remove the need for a custom javascript menu and allow the menu to work using :hover CSS rules.