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;
}