CSS for 4 level submenu [html nested list]

hi

I’ve got a side menu thats a html nested list - I need to add another level (4th level) to it and no matter what I do I can’t get it to work. I find the CSS very confusing. Rather than providing the subnav css that i’ve edit i’ve pasted in the original that goes to 3 levels - can someone show me how to add a 4th level?

Thanks so much.

/* ----- subnav (left-hand) column ----- */

#subnav-col {
	float: left;
	width: 233px;
	border-top: 1px solid #cacec2;
	}
		
#subnav-col h2 {
	font-weight: normal;
	font-size: 1.4em;
	color: #234d1b;
	margin: 0;
	padding: 4px 13px 4px 13px;
	line-height: 1.2;
	background-color: #eeefeb;
	border-bottom: 1px solid #cacec2;
	}
	
#subnav-col h2 a:link, 
#subnav-col h2 a:visited {
	color: #234d1b;
	text-decoration: none;
	}	
	
#subnav-col h2 a:hover {
	color: #234d1b;
	text-decoration: underline;
	}		

#subnav-col ul {
	margin: 0;
	padding: 0;
	}
	
#subnav-col ul li {
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-weight: normal;
	font-size: 1.2em;
	color: #234d1b;
	}	
			
#subnav-col ul li ul li, 
#subnav-col ul li ul li ul li {
	font-size: 100%;
	font-weight: normal;
	}
	
#subnav-col ul li a:link, 
#subnav-col ul li a:visited {
	margin: 0;
	padding: 5px 13px 4px 13px;
	color: #234d1b;
	display: block;
	text-decoration: none;
	border-bottom: 1px solid #dcdfd7;
	background: #fff url(../img/bullet.gif) no-repeat 0 6px;
	}
	
#subnav-col ul li a:hover {
	margin: 0;
	padding: 5px 13px 4px 13px;
	color: #000;
	display: block;
	text-decoration: none;
	border-bottom: 1px solid #dcdfd7;
	background: #fff url(../img/bullet-current.gif) no-repeat 0 6px;
	}		
	
#subnav-col ul li.current a:link, 
#subnav-col ul li.current a:visited, 
#subnav-col ul li.current a:hover {
	margin: 0;
	padding: 5px 13px 4px 13px;
	color: #000;
	display: block;
	text-decoration: none;
	border-bottom: 1px solid #dcdfd7;
	background: #fff url(../img/bullet-current.gif) no-repeat 0 6px;
	}
	
#subnav-col ul li.parent a:link, 
#subnav-col ul li.parent a:visited, 
#subnav-col ul li.parent a:hover {
	margin: 0;
	padding: 5px 13px 4px 13px;
	color: #000;
	display: block;
	text-decoration: none;
	border-bottom: 1px solid #dcdfd7;
	background: #fff url(../img/bullet-parent.gif) no-repeat 0 6px;
	}	
	
#subnav-col ul li ul li a:link, 
#subnav-col ul li ul li a:visited, 
#subnav-col ul li.parent ul li a:link, 
#subnav-col ul li.parent ul li a:visited {
	padding: 5px 13px 4px 27px;
	background: #fff url(../img/bullet.gif) no-repeat 13px 6px;
	color: #234d1b;
	}
	
#subnav-col ul li ul li a:hover, 
#subnav-col ul li.parent ul li a:hover {
	padding: 5px 13px 4px 27px;
	background: #fff url(../img/bullet-current.gif) no-repeat 13px 6px;
	color: #000;
	}
	
#subnav-col ul li ul li.current a:link, 
#subnav-col ul li ul li.current a:visited, 
#subnav-col ul li ul li.current a:hover, 
#subnav-col ul li.parent ul li.current a:link, 
#subnav-col ul li.parent ul li.current a:visited, 
#subnav-col ul li.parent ul li.current a:hover {
	padding: 5px 13px 4px 27px;
	background: #fff url(../img/bullet-current.gif) no-repeat 13px 6px;
	color: #000;
	}
	
#subnav-col ul li ul li a:link, 
#subnav-col ul li ul li a:visited, 
#subnav-col ul li ul li a:hover {
	padding: 5px 13px 4px 27px;
	}
	
#subnav-col ul li ul li.parent a:link, 
#subnav-col ul li ul li.parent a:visited, 
#subnav-col ul li ul li.parent a:hover, 
#subnav-col ul li.parent ul li.parent a:link, 
#subnav-col ul li.parent ul li.parent a:visited, 
#subnav-col ul li.parent ul li.parent a:hover {
	padding: 5px 13px 4px 27px;
	background: #fff url(../img/bullet-parent.gif) no-repeat 13px 6px;
	color: #000;
	}		
	
#subnav-col ul li ul li ul li a:link, 
#subnav-col ul li ul li ul li a:visited, 
#subnav-col ul li.parent ul li ul li a:link, 
#subnav-col ul li.parent ul li ul li a:visited, 
#subnav-col ul li ul li.parent ul li a:link, 
#subnav-col ul li ul li.parent ul li a:visited, 
#subnav-col ul li.parent ul li.parent ul li a:link, 
#subnav-col ul li.parent ul li.parent ul li a:visited, 
#subnav-col ul li ul li.current ul li a:link, 
#subnav-col ul li ul li.current ul li a:visited {
	padding: 5px 13px 4px 40px;
	background: #fff url(../img/bullet.gif) no-repeat 27px 6px;
	color: #234d1b;
	}
	
#subnav-col ul li ul li ul li a:hover, 
#subnav-col ul li.parent ul li ul li a:hover, 
#subnav-col ul li ul li.parent ul li a:hover, 
#subnav-col ul li.parent ul li.parent ul li a:hover {
	padding: 5px 13px 4px 40px;
	background: #fff url(../img/bullet-current.gif) no-repeat 27px 6px;
	color: #000;
	}

#subnav-col ul li ul li ul li.current a:link, 
#subnav-col ul li ul li ul li.current a:visited, 
#subnav-col ul li ul li ul li.current a:hover, 
#subnav-col ul li.parent ul li ul li.current a:link, 
#subnav-col ul li.parent ul li ul li.current a:visited, 
#subnav-col ul li.parent ul li ul li.current a:hover, 
#subnav-col ul li ul li.parent ul li.current a:link, 
#subnav-col ul li ul li.parent ul li.current a:visited, 
#subnav-col ul li ul li.parent ul li.current a:hover, 
#subnav-col ul li.parent ul li.parent ul li.current a:link, 
#subnav-col ul li.parent ul li.parent ul li.current a:visited, 
#subnav-col ul li.parent ul li.parent ul li.current a:hover {
	padding: 5px 13px 4px 40px;
	background: #fff url(../img/bullet-current.gif) no-repeat 27px 6px;
	color: #000;
	}		
	
/* --- blocks of content in subnav column --- */	

/* subnav column links */		

#subnav-col .related-links-box ul a:link, 
#subnav-col .highlight-box p a:link, 
#subnav-col .highlight-box ul a:link {
	color: #004161;
	font-weight: bold;
	text-decoration:none;
	}

#subnav-col .related-links-box ul a:visited, 
#subnav-col .highlight-box p a:visited, 
#subnav-col .highlight-box ul a:visited {
	color:#336781; 
	font-weight: bold;
	text-decoration:none;
	}
	
#subnav-col .related-links-box ul a:hover, 
#subnav-col .highlight-box p a:hover, 
#subnav-col .highlight-box ul a:hover {
	color: #004161;
	font-weight: bold;
	text-decoration:underline;
	}


/* related links box - subnav column */

#subnav-col .related-links-box {
	width: 233px; 
	background-color: #f6f7f5;
	margin: 20px 0 20px 0;
	padding: 0;
	border-top: 1px solid #cacec2;
	}	
	
#subnav-col .related-links-box h2, 
#subnav-col .related-links-box h3, 
#subnav-col .related-links-box h4, 
#subnav-col .related-links-box h5, 
#subnav-col .related-links-box h6 {
	font-weight: normal;
	font-size: 1.4em;
	color: #004161;
	margin: 0;
	padding: 3px 13px 4px 13px;
	line-height: 1.2;
	background-color: #eeefeb;
	border-bottom: 1px solid #cacec2;
	}	
	
#subnav-col .related-links-box h2 a:link, 
#subnav-col .related-links-box h2 a:visited,
#subnav-col .related-links-box h3 a:link, 
#subnav-col .related-links-box h3 a:visited,
#subnav-col .related-links-box h4 a:link, 
#subnav-col .related-links-box h4 a:visited,
#subnav-col .related-links-box h5 a:link, 
#subnav-col .related-links-box h5 a:visited,
#subnav-col .related-links-box h6 a:link, 
#subnav-col .related-links-box h6 a:visited {
	color: #004161;
	text-decoration: none;
	}	
	
#subnav-col .related-links-box h2 a:hover, 
#subnav-col .related-links-box h3 a:hover, 
#subnav-col .related-links-box h4 a:hover, 
#subnav-col .related-links-box h5 a:hover, 
#subnav-col .related-links-box h6 a:hover {
	color: #004161;
	text-decoration: underline;
	}		
	
#subnav-col .related-links-box ul {
	margin: 11px 0 0 0;
	padding: 0 13px;
	}
	
#subnav-col .related-links-box ul li {
	font-size: 1.1em;
	margin: 0;
	padding: 0 0 12px 14px;
	line-height: 1.2;
	list-style-type: none;
	background: url(../img/bullet.gif) no-repeat 0 2px;
	font-weight: normal;
	}	
	
#subnav-col .related-links-box ul li a:link {
	padding: 0;
	border-bottom: none;
	background: none;
	}
	
#subnav-col .related-links-box ul li a:visited {
	padding: 0;
	border-bottom: none;
	background: none;
	}	
	
#subnav-col .related-links-box ul li a:hover {
	padding: 0;
	border-bottom: none;
	background: none;
	} 

You need to post the html as well, otherwise we only have half the picture. :slight_smile:

Here’s the hTML - thanks for your help.

 <div id="content-wrapper-3col">
    <div id="subnav-content-wrapper">
      <div id="subnav-col"><!-- InstanceBeginEditable name="navigation" -->      

<h2><a href="/scheme/participating/">Participating</a></h2>
      <ul>
        <li><a href="/scheme/participating/Apples/">Apples</a></li>
        <li><a href="/scheme/participating/Oranges/">Oranges</a></li>
        <li><a href="/scheme/participating/Bananas/">Bananas</a></li>
        <li><a href="/scheme/participating/Grapes/">Grapes</a></li>
        <li><a href="/scheme/participating/Cherries/">Cherries</a>
            <ul>
              <li><a href="/scheme/participating/Cherries/obligation/">Obligations</a></li>
              <li><a href="/scheme/participating/Cherries/allocation/">Allocation</a>
                <ul>
                  <li><a href="/scheme/participating/Cherries/allocation/activities/">activities</a></li><li><a href="/scheme/participating/Cherries/allocation/how-it-works/">How it works</a></li>
                  <li><a href="/scheme/participating/Cherries/allocation/how-it-works/">Applying</a>
                  <ul>                  
              <li><a href="/scheme/participating/Cherries/allocation/applying/index.html" class="Bananas">Before applying</a></li>
</ul></li>
                  <li><a href="/scheme/participating/Cherries/allocation/calculators/">Calculators</a></li>
                  
                  <li><a href="/scheme/participating/Cherries/allocation/faq.html">FAQs</a></li>
                  <li><a href="decisions/index.html">Decisions</a></li>
                  
                </ul>
              </li>
              <li><a href="/scheme/participating/Cherries/call-for-data/">Call</a></li>
              <li><a href="/scheme/participating/Cherries/faq.html">FAQs</a></li>
            </ul>
        </li>
        <li><a href="/scheme/participating/fuels/">Health</a></li>
        <li><a href="/scheme/participating/gas/">Gas</a></li>
        <li><a href="/scheme/participating/waste/">Waste</a></li>
      </ul>
        <!-- InstanceEndEditable --></div>
      <!-- end subnav-col -->
      <div id="content-col"> 

:slight_smile: I can understand why you find this complicated and difficult, it looks that way to me too. Hopefully someone can find a quick and elegant solution, but I think the stronger option may be to rewrite the code along more iterative lines.

I can’t provide an example because I’ve never gone three layers deep before. But I can provide this example. When I built my first drop down menus I had two significant sections of my stylesheet, one to style and position each element in the navbar and another section to style and position the menu which belonged to each navbar element. This worked fine, but the CSS was overbuilt and I needed ids for each list item in the navbar and an id for each menu. When I recently redid my web design I built on that component and wound up with a much lighter navbar with one id on the main navbar ul tag and a dozen style rules to do the same thing. It may be more difficult in the short term but in the long term it’ll be more maintainable and sensible for you.

Thanks Chroniclemaster1 its literally driving me nuts!!

Yep, you’re right it would probably be easier to redo the menu but i’m just hoping someone can figure out how to create a 4th level with the above.

If you add this - the line in red - (at around line 45 of your CSS

#subnav-col ul li ul li,
#subnav-col ul li ul li ul li[COLOR="Red"],
#subnav-col ul li ul li ul li ul li [/COLOR]{
font-size: 100%;
font-weight: normal;
}

and this whole block (at around like 154 of you CSS)

#subnav-col ul li ul li ul li ul li a:link,
#subnav-col ul li ul li ul li ul li a:visited,
#subnav-col ul li.parent ul li ul li ul li a:link,
#subnav-col ul li.parent ul li ul li ul li a:visited,
#subnav-col ul li ul li.parent ul li ul li a:link,
#subnav-col ul li ul li.parent ul li ul li a:visited,
#subnav-col ul li.parent ul li.parent ul li ul li a:link,
#subnav-col ul li.parent ul li.parent ul li ul li a:visited,
#subnav-col ul li ul li.current ul li ul li a:link,
#subnav-col ul li ul li.current ul li ul li a:visited {
padding: 5px 13px 4px 53px;
background: #fff url(../img/bullet.gif) no-repeat 40px 6px;
color: #234d1b;
}

You should get most of the way there. I’m not sure about the bullets, as you didn’t include the image, so I can’t test it.

Here is the fully revised CSS:


#subnav-col {
float: left;
width: 233px;
border-top: 1px solid #cacec2;
}

#subnav-col h2 {
font-weight: normal;
font-size: 1.4em;
color: #234d1b;
margin: 0;
padding: 4px 13px 4px 13px;
line-height: 1.2;
background-color: #eeefeb;
border-bottom: 1px solid #cacec2;
}

#subnav-col h2 a:link,
#subnav-col h2 a:visited {
color: #234d1b;
text-decoration: none;
}

#subnav-col h2 a:hover {
color: #234d1b;
text-decoration: underline;
}

#subnav-col ul {
margin: 0;
padding: 0;
}

#subnav-col ul li {
margin: 0;
padding: 0;
list-style-type: none;
font-weight: normal;
font-size: 1.2em;
color: #234d1b;
}

#subnav-col ul li ul li,
#subnav-col ul li ul li ul li,
#subnav-col ul li ul li ul li ul li {
font-size: 100%;
font-weight: normal;
}

#subnav-col ul li a:link,
#subnav-col ul li a:visited {
margin: 0;
padding: 5px 13px 4px 13px;
color: #234d1b;
display: block;
text-decoration: none;
border-bottom: 1px solid #dcdfd7;
background: #fff url(../img/bullet.gif) no-repeat 0 6px;
}

#subnav-col ul li a:hover {
margin: 0;
padding: 5px 13px 4px 13px;
color: #000;
display: block;
text-decoration: none;
border-bottom: 1px solid #dcdfd7;
background: #fff url(../img/bullet-current.gif) no-repeat 0 6px;
}

#subnav-col ul li.current a:link,
#subnav-col ul li.current a:visited,
#subnav-col ul li.current a:hover {
margin: 0;
padding: 5px 13px 4px 13px;
color: #000;
display: block;
text-decoration: none;
border-bottom: 1px solid #dcdfd7;
background: #fff url(../img/bullet-current.gif) no-repeat 0 6px;
}

#subnav-col ul li.parent a:link,
#subnav-col ul li.parent a:visited,
#subnav-col ul li.parent a:hover {
margin: 0;
padding: 5px 13px 4px 13px;
color: #000;
display: block;
text-decoration: none;
border-bottom: 1px solid #dcdfd7;
background: #fff url(../img/bullet-parent.gif) no-repeat 0 6px;
}

#subnav-col ul li ul li a:link,
#subnav-col ul li ul li a:visited,
#subnav-col ul li.parent ul li a:link,
#subnav-col ul li.parent ul li a:visited {
padding: 5px 13px 4px 27px;
background: #fff url(../img/bullet.gif) no-repeat 13px 6px;
color: #234d1b;
}

#subnav-col ul li ul li a:hover,
#subnav-col ul li.parent ul li a:hover {
padding: 5px 13px 4px 27px;
background: #fff url(../img/bullet-current.gif) no-repeat 13px 6px;
color: #000;
}

#subnav-col ul li ul li.current a:link,
#subnav-col ul li ul li.current a:visited,
#subnav-col ul li ul li.current a:hover,
#subnav-col ul li.parent ul li.current a:link,
#subnav-col ul li.parent ul li.current a:visited,
#subnav-col ul li.parent ul li.current a:hover {
padding: 5px 13px 4px 27px;
background: #fff url(../img/bullet-current.gif) no-repeat 13px 6px;
color: #000;
}

#subnav-col ul li ul li a:link,
#subnav-col ul li ul li a:visited,
#subnav-col ul li ul li a:hover {
padding: 5px 13px 4px 27px;
}

#subnav-col ul li ul li.parent a:link,
#subnav-col ul li ul li.parent a:visited,
#subnav-col ul li ul li.parent a:hover,
#subnav-col ul li.parent ul li.parent a:link,
#subnav-col ul li.parent ul li.parent a:visited,
#subnav-col ul li.parent ul li.parent a:hover {
padding: 5px 13px 4px 27px;
background: #fff url(../img/bullet-parent.gif) no-repeat 13px 6px;
color: #000;
}

#subnav-col ul li ul li ul li a:link,
#subnav-col ul li ul li ul li a:visited,
#subnav-col ul li.parent ul li ul li a:link,
#subnav-col ul li.parent ul li ul li a:visited,
#subnav-col ul li ul li.parent ul li a:link,
#subnav-col ul li ul li.parent ul li a:visited,
#subnav-col ul li.parent ul li.parent ul li a:link,
#subnav-col ul li.parent ul li.parent ul li a:visited,
#subnav-col ul li ul li.current ul li a:link,
#subnav-col ul li ul li.current ul li a:visited {
padding: 5px 13px 4px 40px;
background: #fff url(../img/bullet.gif) no-repeat 27px 6px;
color: #234d1b;
}

#subnav-col ul li ul li ul li ul li a:link,
#subnav-col ul li ul li ul li ul li a:visited,
#subnav-col ul li.parent ul li ul li ul li a:link,
#subnav-col ul li.parent ul li ul li ul li a:visited,
#subnav-col ul li ul li.parent ul li ul li a:link,
#subnav-col ul li ul li.parent ul li ul li a:visited,
#subnav-col ul li.parent ul li.parent ul li ul li a:link,
#subnav-col ul li.parent ul li.parent ul li ul li a:visited,
#subnav-col ul li ul li.current ul li ul li a:link,
#subnav-col ul li ul li.current ul li ul li a:visited {
padding: 5px 13px 4px 53px;
background: #fff url(../img/bullet.gif) no-repeat 40px 6px;
color: #234d1b;
}

#subnav-col ul li ul li ul li a:hover,
#subnav-col ul li.parent ul li ul li a:hover,
#subnav-col ul li ul li.parent ul li a:hover,
#subnav-col ul li.parent ul li.parent ul li a:hover {
padding: 5px 13px 4px 40px;
background: #fff url(../img/bullet-current.gif) no-repeat 27px 6px;
color: #000;
}

#subnav-col ul li ul li ul li.current a:link,
#subnav-col ul li ul li ul li.current a:visited,
#subnav-col ul li ul li ul li.current a:hover,
#subnav-col ul li.parent ul li ul li.current a:link,
#subnav-col ul li.parent ul li ul li.current a:visited,
#subnav-col ul li.parent ul li ul li.current a:hover,
#subnav-col ul li ul li.parent ul li.current a:link,
#subnav-col ul li ul li.parent ul li.current a:visited,
#subnav-col ul li ul li.parent ul li.current a:hover,
#subnav-col ul li.parent ul li.parent ul li.current a:link,
#subnav-col ul li.parent ul li.parent ul li.current a:visited,
#subnav-col ul li.parent ul li.parent ul li.current a:hover {
padding: 5px 13px 4px 40px;
background: #fff url(../img/bullet-current.gif) no-repeat 27px 6px;
color: #000;
}

/* --- blocks of content in subnav column --- */

/* subnav column links */

#subnav-col .related-links-box ul a:link,
#subnav-col .highlight-box p a:link,
#subnav-col .highlight-box ul a:link {
color: #004161;
font-weight: bold;
text-decoration:none;
}

#subnav-col .related-links-box ul a:visited,
#subnav-col .highlight-box p a:visited,
#subnav-col .highlight-box ul a:visited {
color:#336781;
font-weight: bold;
text-decoration:none;
}

#subnav-col .related-links-box ul a:hover,
#subnav-col .highlight-box p a:hover,
#subnav-col .highlight-box ul a:hover {
color: #004161;
font-weight: bold;
text-decoration:underline;
}


/* related links box - subnav column */

#subnav-col .related-links-box {
width: 233px;
background-color: #f6f7f5;
margin: 20px 0 20px 0;
padding: 0;
border-top: 1px solid #cacec2;
}

#subnav-col .related-links-box h2,
#subnav-col .related-links-box h3,
#subnav-col .related-links-box h4,
#subnav-col .related-links-box h5,
#subnav-col .related-links-box h6 {
font-weight: normal;
font-size: 1.4em;
color: #004161;
margin: 0;
padding: 3px 13px 4px 13px;
line-height: 1.2;
background-color: #eeefeb;
border-bottom: 1px solid #cacec2;
}

#subnav-col .related-links-box h2 a:link,
#subnav-col .related-links-box h2 a:visited,
#subnav-col .related-links-box h3 a:link,
#subnav-col .related-links-box h3 a:visited,
#subnav-col .related-links-box h4 a:link,
#subnav-col .related-links-box h4 a:visited,
#subnav-col .related-links-box h5 a:link,
#subnav-col .related-links-box h5 a:visited,
#subnav-col .related-links-box h6 a:link,
#subnav-col .related-links-box h6 a:visited {
color: #004161;
text-decoration: none;
}

#subnav-col .related-links-box h2 a:hover,
#subnav-col .related-links-box h3 a:hover,
#subnav-col .related-links-box h4 a:hover,
#subnav-col .related-links-box h5 a:hover,
#subnav-col .related-links-box h6 a:hover {
color: #004161;
text-decoration: underline;
}

#subnav-col .related-links-box ul {
margin: 11px 0 0 0;
padding: 0 13px;
}

#subnav-col .related-links-box ul li {
font-size: 1.1em;
margin: 0;
padding: 0 0 12px 14px;
line-height: 1.2;
list-style-type: none;
background: url(../img/bullet.gif) no-repeat 0 2px;
font-weight: normal;
}

#subnav-col .related-links-box ul li a:link {
padding: 0;
border-bottom: none;
background: none;
}

#subnav-col .related-links-box ul li a:visited {
padding: 0;
border-bottom: none;
background: none;
}

#subnav-col .related-links-box ul li a:hover {
padding: 0;
border-bottom: none;
background: none;
}


OMG!!! It works!

I could kiss you Ralph! You have given me back my life - been at this for 4 days.

Sincerely thank you :slight_smile:

All I can say is I hope you’re a girl! :smiley: But an Irish kiss… well, I can’t think of anything nicer.

Glad it helped. :slight_smile:

lol girl alright :lol:

I haven’t felt so happy in a long time, thanks again.

Hi,
Let me cut that code down by 80% for you :slight_smile:

All your doing here is styling your anchors and all those classes you had set up are not even in the html you posted. You only need to be targeting the a and a:hover, you don’t need to be using the a:link or a:visited when their styles are not any different. If you want to style the :visited states then that can be done for all of them with one rule.

Now, to cut that code down let’s start by giving the parent UL an ID of it’s own. Let’s just call it #nav.

You have this as your first level anchor: #subnav-col ul li a:link

With my ID on the UL it becomes: #nav li a

Do you see how I was able to eliminate that bolded ul after #subnav-col , that’s because #nav IS the first UL.

From there we are just adding li to each new level, the only thing I noticed that was changing was the left padding on each nested li a.

Then the fourth level is simply: #nav li li li li a
Do you see how we can eliminate all the UL’s in between the LI?

Here is my version that renders the same as the code you posted, well except for the background colors that I changed on all the different levels for clarity. The anchor font colors on hover were all the same, they could have been eliminated too but I left them there to give you the option.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>4-level Nested List</title>

<style type="text/css">
body {
    margin:0;
    padding:0;
    font: 100%/1.2 arial,helvetica,sans-serif;
}
/* ----- subnav (left-hand) column ----- */

#subnav-col {
    float: left;
    width: 233px;
    border-top: 1px solid #cacec2;
}

#subnav-col h2 {
    font-weight: normal;
    font-size: 1.4em;
    color: #234d1b;
    margin: 0;
    padding: 4px 13px 4px 13px;
    line-height: 1.2;
    background-color: #eeefeb;
    border-bottom: 1px solid #cacec2;
}

#subnav-col h2 a {
    color: #234d1b;
    text-decoration: none;
}

#subnav-col h2 a:hover {
    color: #234d1b;
    text-decoration: underline;
}

/*--- Nested List Styles ---*/
ul#nav, #nav ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
 
/*--- First level anchors (+ sub li anchors)---*/
#nav li a {
    display: block;
    padding: 5px 13px 4px 13px;
    color: #234d1b;
    text-decoration: none;
    border-bottom: 1px solid #dcdfd7;
    background: #FFF url(../img/bullet.gif) no-repeat 0 6px;
}
#nav li a:hover {
    color: #000;
}

/*--- Second level anchors ---*/
#nav li li a {
    padding: 5px 13px 4px 27px;
    background: #CCC url(../img/bullet.gif) no-repeat 13px 6px;
}
#nav li li a:hover {
    color: #000;
}

/*--- Third level anchors ---*/
#nav li li li a {
    padding: 5px 13px 4px 40px;
    background: #EEF url(../img/bullet.gif) no-repeat 27px 6px;
}
#nav li li li a:hover {
    color: #000;
}

/*--- Fourth level anchors ---*/
#nav li li li li a {
    padding: 5px 13px 4px 60px;
    background: #CFF url(../img/bullet.gif) no-repeat 27px 6px; /*adjust this BG position for fourth level*/
}
#nav li li li li a:hover {
    color: #000;
}
</style>

</head>
<body>

<div id="subnav-col">

<h2><a href="/scheme/participating/">Participating</a></h2>
<ul id="nav">
    <li><a href="/scheme/participating/Apples/">Apples</a></li>
    <li><a href="/scheme/participating/Oranges/">Oranges</a></li>
    <li><a href="/scheme/participating/Bananas/">Bananas</a></li>
    <li><a href="/scheme/participating/Grapes/">Grapes</a></li>
    <li><a href="/scheme/participating/Cherries/">Cherries</a>
        <ul>
            <li><a href="/scheme/participating/Cherries/obligation/">Obligations</a></li>
            <li><a href="/scheme/participating/Cherries/allocation/">Allocation</a>
                <ul>
                    <li><a href="/scheme/participating/Cherries/allocation/activities/">activities</a></li>
                    <li><a href="/scheme/participating/Cherries/allocation/how-it-works/">How it works</a></li>
                    <li><a href="/scheme/participating/Cherries/allocation/how-it-works/">Applying</a>
                        <ul>
                            <li><a href="/scheme/participating/Cherries/allocation/applying/index.html">Before applying</a></li>
                            <li><a href="/scheme/participating/Cherries/allocation/applying/index.html">Fourth Level Link</a></li>
                            <li><a href="/scheme/participating/Cherries/allocation/applying/index.html">Fourth Level Link</a></li>
                        </ul>
                    </li>
                    <li><a href="/scheme/participating/Cherries/allocation/calculators/">Calculators</a></li>
                    <li><a href="/scheme/participating/Cherries/allocation/faq.html">FAQs</a></li>
                    <li><a href="decisions/index.html">Decisions</a></li>
                </ul>
            </li>
            <li><a href="/scheme/participating/Cherries/call-for-data/">Call</a></li>
            <li><a href="/scheme/participating/Cherries/faq.html">FAQs</a></li>
        </ul>
    </li>
    <li><a href="/scheme/participating/fuels/">Health</a></li>
    <li><a href="/scheme/participating/gas/">Gas</a></li>
    <li><a href="/scheme/participating/waste/">Waste</a></li>
</ul>
</div>


</body>
</html>

Nice work, Ray. You’ve made me feel lazy now. :blush:

Nah, you shouldn’t feel that way, that was not my intention at all. :wink:

I just wanted to point out to tinggg how simple this really was since the anchors were the only thing being styled here.

Granted, if this had of been a dropdown with styles needed for all the different UL levels with li:hover thrown into the mix, things would get really complicated after the third level.

As with any nested UL it is always just a matter of resetting the children since inheritance is at work here. The key is to keep your IDs and class names as short as possible and to utilize simple descendant selectors when you can.

You guys always impress me, but mostly I’m happy for tinggg. I’ve been on the other end of that 4 days.

…though I believe you guys have helped me through a couple of those to boot. :wink:

One more request please.

I noticed that when I click on a 4th level nav link, the link jumps back to 3rd level – is there anything I can do to so that it stays at 4th level when clicked?

Thanks so much.

Not quite sure what you’re describing. A live link would make this much easier.

BTW, did you see Ray’s post above (#10)? He gave a much cleaner version of your code which I recommend you use, if you haven’t.

Hi Ralph

I’ve attached an image as the menu is in staging. When a fouth level link is click the link jumps back to level 3. Hope the image shows what I mean. If the fix isn’t obvious I don’t want to take up any more of your time

Rayzur - thanks so much for your help. The site has multiple menu’s that really need to be re-done - its a mess - right now i’m just tryin to fix this issue but there’s no doubt the site will need to implement your suggestions, so much appreciated.

When a fouth level link is click the link jumps back to level 3.

Hi,
I am guessing that you are still using your original code with a:link, as I mentioned earlier you will make things much easier on your self by just working from the a only. Then set your :visited states with one rule for all levels, I don’t see any reason why the four levels need different styles for visited states.

Here is the code I was using with one rule for all visited states, I placed some links to this forum on the fourth level anchors. There is nothing jumping around and the red color that I set picks up just fine. :wink:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>4-level Nested List</title>
 
<style type="text/css">
body {
    margin:0;
    padding:0;
    font: 100%/1.2 arial,helvetica,sans-serif;
}
/* ----- subnav (left-hand) column ----- */
 
#subnav-col {
    float: left;
    width: 233px;
    border-top: 1px solid #cacec2;
}
 
#subnav-col h2 {
    font-weight: normal;
    font-size: 1.4em;
    color: #234d1b;
    margin: 0;
    padding: 4px 13px 4px 13px;
    line-height: 1.2;
    background-color: #eeefeb;
    border-bottom: 1px solid #cacec2;
}
 
#subnav-col h2 a {
    color: #234d1b;
    text-decoration: none;
}
 
#subnav-col h2 a:hover {
    color: #234d1b;
    text-decoration: underline;
}
 
/*--- Nested List Styles ---*/
ul#nav, #nav ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
 
/*--- First level anchors (+ sub li anchors)---*/
#nav li a {
    display: block;
    padding: 5px 13px 4px 13px;
    color: #234d1b;
    text-decoration: none;
    border-bottom: 1px solid #dcdfd7;
    background: #FFF url(../img/bullet.gif) no-repeat 0 6px;
}
[COLOR=Blue]#nav li a:visited {
    [B]color: red;[/B]
}[/COLOR]
[COLOR=Blue]#nav li a:active,
#nav li a:focus,
#nav li a:hover {
    [B]color: #000;[/B]
}[/COLOR]
 
/*--- Second level anchors ---*/
#nav li li a {
    padding: 5px 13px 4px 27px;
    background: #CCC url(../img/bullet.gif) no-repeat 13px 6px;
}
#nav li li a:hover {
    color: #000;
}
 
/*--- Third level anchors ---*/
#nav li li li a {
    padding: 5px 13px 4px 40px;
    background: #EEF url(../img/bullet.gif) no-repeat 27px 6px;
}
#nav li li li a:hover {
    color: #000;
}
 
/*--- Fourth level anchors ---*/
#nav li li li li a {
    padding: 5px 13px 4px 60px;
    background: #CFF url(../img/bullet.gif) no-repeat 27px 6px; /*adjust this BG position for fourth level*/
}
#nav li li li li a:hover {
    color: #000;
}
</style>
 
</head>
<body>
 
<div id="subnav-col">
 
<h2><a href="/scheme/participating/">Participating</a></h2>
<ul id="nav">
    <li><a href="/scheme/participating/Apples/">Apples</a></li>
    <li><a href="/scheme/participating/Oranges/">Oranges</a></li>
    <li><a href="/scheme/participating/Bananas/">Bananas</a></li>
    <li><a href="/scheme/participating/Grapes/">Grapes</a></li>
    <li><a href="/scheme/participating/Cherries/">Cherries</a>
        <ul>
            <li><a href="/scheme/participating/Cherries/obligation/">Obligations</a></li>
            <li><a href="/scheme/participating/Cherries/allocation/">Allocation</a>
                <ul>
                    <li><a href="/scheme/participating/Cherries/allocation/activities/">activities</a></li>
                    <li><a href="/scheme/participating/Cherries/allocation/how-it-works/">How it works</a></li>
                    <li><a href="/scheme/participating/Cherries/allocation/how-it-works/">Applying</a>
                        <ul>
[COLOR=DarkGreen]                            <li><a href="http://www.sitepoint.com/forums/forumdisplay.php?f=53">Before applying</a></li>
                            <li><a href="http://www.sitepoint.com/forums/forumdisplay.php?f=53">Fourth Level Link</a></li>
                            <li><a href="http://www.sitepoint.com/forums/forumdisplay.php?f=53">Fourth Level Link</a></li>[/COLOR]
                        </ul>
                    </li>
                    <li><a href="/scheme/participating/Cherries/allocation/calculators/">Calculators</a></li>
                    <li><a href="/scheme/participating/Cherries/allocation/faq.html">FAQs</a></li>
                    <li><a href="decisions/index.html">Decisions</a></li>
                </ul>
            </li>
            <li><a href="/scheme/participating/Cherries/call-for-data/">Call</a></li>
            <li><a href="/scheme/participating/Cherries/faq.html">FAQs</a></li>
        </ul>
    </li>
    <li><a href="/scheme/participating/fuels/">Health</a></li>
    <li><a href="/scheme/participating/gas/">Gas</a></li>
    <li><a href="/scheme/participating/waste/">Waste</a></li>
</ul>
</div>
 
 
</body>
</html>