need help with a 3-level menu

**stevemtno** · Nov 19, 2008, 20:25

Hi Everyone,

I'm trying to build a 3 level nav for my website. I've got the first 2 levels working great, but I'm not sure how to go about getting the third one. Here's the way it currently works:

There are 2 horizontal menus. As you mouseover the primary menu items, the submenu items change. What I want to do is have a vertical dropdown when you hover over a submenu item.

So if you go News - Forums, then a vertical list of forums should appear underneath the Forums submenu item.

Here is the code for the menu & submenu. If someone could help with the third level, I'd really appreciate it. Thanks!

Steve

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
div.rss_item {background-position:1px 7px;margin-top:3px;display:block;padding-left:10px;background-image:url(http://images.stltoday.com/stltoday/images/bullet.gif);background-repeat:no-repeat}
a.rss_link {font-size:12px;color:#333;line-height:20px;text-decoration:none;}

/* TEST NAV CSS FILE */

/* @group Reset */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
body {font-family:tahoma, arial, sans-serif; font-size:16px;}
a {text-decoration: none;}
a:hover {text-decoration: underline;}
font {font-family:inherit;font-size:inherit;color:inherit;}

/* @end */

/* @group Main navigation */

#stlnav {
	margin: 6px 0 5px 0;
}

ul#stlprimary {
	padding-left: 15px;
	background: #fff;
	border-top: 1px solid #333333;
}

ul#stlprimary li {
	margin: 0;
	padding: 0;
/* uncomment the following line to add the lines
	border-right: 1px solid #c4cbdb; */
	background: none;	
	list-style: none;
	float: left;
}

ul#stlprimary li.lastLi {
	border-right: none;
}

ul#stlprimary li.active2 a {
	background: #900;
	font-weight: bold;
	color: #fff;
}

ul#stlprimary li a {
	padding: 5px 12px;
	color: #fff;
	text-decoration: none;
	float: left;
	font-size: 16px;
}

ul#stlprimary li a {
	padding: 5px 12px;
	color: #333;
	text-decoration: none;
	float: left;
}

#stlsubnav {
	border-bottom: 1px solid #ddd;
	background: #900;
	padding-left: 13px;
}

#stlsubnav ul {
	margin: 0;
}

#stlsubnav ul li {
	margin: 0;
	padding: 0;
/* uncomment the following line to add the lines
	border-right: 1px solid #ddd; */
	background: none;
	line-height: 21px;
	list-style: none;
	float: left;
	display: inline;
	font-size: 12px;
}

#stlsubnav ul li.lastLi {
	border-right: none;
}

#stlsubnav ul li.SubTag {
	background: #fff;
	border-right: none;
	border-left: 1px solid #ddd;
	float: right;
}

#stlsubnav ul li.SubTag a {
	padding: 2px 0;
}

#stlsubnav ul li a {
	padding: 0px 14px;
	line-height: 20px;
	float: left;
	color: #fff;
	font-weight: bold;
}

/* end */

/* Clearfix */

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1&#37;;}
.clearfix {display: block;}
/* End hide from IE-mac */

.clearfix:after, .ajc-container:after {content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix, .ajc-container {display:inline-block;}
* html .clearfix, * html .ajc-container {height:1%;}
.clearfix, .ajc-container {display:block;}

/* end */
</style>
</head>

<body id="ajchome">
		
<!-- BEGIN hdr_uninav -->

<div id="stlnav">
	<ul id="stlprimary" class="clearfix">			
		<li id="stlnav-home"><a href="http://www.stltoday.com/">Home</a></li>
		<li id="stlnav-news"><a href="http://www.stltoday.com/news">News</a></li>
		<li id="stlnav-business"><a href="http://www.stltoday.com/business">Business</a></li>
		<li id="stlnav-sports"><a href="http://www.stltoday.com/sports">Sports</a></li>
		<li id="stlnav-ent"><a href="http://www.stltoday.com/entertainment">Entertainment</a></li>
		<li id="stlnav-lifestyle"><a href="http://www.stltoday.com/lifestyle">Life &amp; Style</a></li>
		<li id="stlnav-multimedia"><a href="http://www.stltoday.com/multimedia">Multimedia</a></li>
		<li id="stlnav-opinion"><a href="http://www.stltoday.com/opinion">Opinion</a></li>
		<li id="stlnav-jobs"><a href="http://www.stltoday.com/jobs">Jobs</a></li>
		<li id="stlnav-rides"><a href="http://www.stltoday.com/rides">Rides</a></li>
		<li id="stlnav-homes"><a href="http://www.stltoday.com/realestate">Homes</a></li>
		<li id="stlnav-shopstl" class="lastLi"><a href="http://www.stltoday.com/shopstl">ShopSTL</a></li>
	</ul>

	<div id="stlsubnav" class="clearfix">
	
		<div id="stlsubnavs" onmouseover="stopreset()">
		
			<div id="stlsubnav-home" style="display:none;">
				<ul>
					<li><a href="http://www.stltoday.com/mobile/content/mobile/index.html">Site Map</a></li>
					<li><a href="http://www.stltoday.com/userreg/userreg/userregclass/edit_profile.jsp">Subscriber Services</a></li>
					<li><a href="http://www.stltoday.com">Make STLToday.com your home page</a></li>
					<li><a href="http://www.stltoday.com/services/content/services/widgets/index.html">Advertise with us</a></li>		
					<li><a href="http://www.stltoday.com/traffic/content/metro/traffic/">Traffic</a></li>
					<li><a href="http://www.stltoday.com/news/content/news/weather/index.html">test link</a></li>
					<li class="lastLi"><a href="http://www.stltoday.com/printedition">test link</a></li>
				</ul>
			</div>
		
			<div id="stlsubnav-news" style="display:none;">
				<ul>
					<li><a href="http://www.stltoday.com">News</a></li>
					<li><a href="http://www.stltoday.com">Columns</a></li>
					<li><a href="http://www.stltoday.com">Forums</a></li>
					<li><a href="http://www.stltoday.com">Volunteer</a></li>
					<li><a href="http://www.stltoday.com">STL Info</a></li>
					<li><a href="http://www.stltoday.com">Extras</a></li>
					<li class="lastLi"><a href="http://www.stltoday.com">test link</a></li>
				</ul>
			</div>
			
			<div id="stlsubnav-business" style="display:none;">
				<ul>
					<li><a href="http://www.stltoday.com">Business</a></li>
					<li><a href="http://www.stltoday.com">Columns</a></li>
					<li><a href="http://www.stltoday.com">Blogs</a></li>
					<li><a href="http://www.stltoday.com">STL Info</a></li>
					<li><a href="http://www.stltoday.com">Extras</a></li>
					<li class="lastLi"><a href="http://www.stltoday.com">test link</a></li>
				</ul>
			</div>
		
			<div id="stlsubnav-sports" style="display:none;">
				<ul>
					<li><a href="http://www.stltoday.com">Cardinals</a></li>
					<li><a href="http://www.stltoday.com">Rams</a></li>
					<li><a href="http://www.stltoday.com">Blues</a></li>
					<li><a href="http://www.stltoday.com">Mizzou</a></li>
					<li><a href="http://www.stltoday.com">Illini</a></li>
					<li><a href="http://www.stltoday.com">High Schools</a></li>
					<li class="lastLi"><a href="http://www.stltoday.com">Columns</a></li>
				</ul>
			</div>
			
			<div id="stlsubnav-ent" style="display:none;">
				<ul>
					<li><a href="http://www.stltoday.com">Entertainment</a></li>
					<li><a href="http://www.stltoday.com">Columns</a></li>
					<li><a href="http://www.stltoday.com">Forums</a></li>
					<li><a href="http://www.stltoday.com">Blogs</a></li>
					<li><a href="http://www.stltoday.com">Extras</a></li>
					<li class="lastLi"><a href="http://www.stltoday.com">Live Chats</a></li>
				</ul>
			</div>
		
			<div id="stlsubnav-lifestyle" style="display:none;">
				<ul>
					<li><a href="http://www.stltoday.com">Life &amp; Style</a></li>
					<li><a href="http://www.stltoday.com">Columns</a></li>
					<li><a href="http://www.stltoday.com">Forums</a></li>
					<li><a href="http://www.stltoday.com">Live chats</a></li>
					<li class="lastLi"><a href="http://www.stltoday.com">test link</a></li>
				</ul>
			</div>
		
			<div id="stlsubnav-multimedia" style="display:none;">
				<ul>
					<li><a href="http://www.stltoday.com">Multimedia</a></li>
					<li><a href="http://www.stltoday.com">Photos</a></li>
					<li><a href="http://www.stltoday.com">P-D Store</a></li>
					<li><a href="http://www.stltoday.com">Extras</a></li>
					<li class="lastLi"><a href="http://www.stltoday.com">Videos</a></li>
				</ul>
			</div>
		
			<div id="stlsubnav-opinion" style="display:none;">
				<ul>
					<li><a href="http://www.stltoday.com">Opinions</a></li>
					<li><a href="http://www.stltoday.com">My opinion</a></li>
					<li><a href="http://www.stltoday.com">Your opinion</a></li>
					<li><a href="http://www.stltoday.com">His opinion</a></li>
					<li><a href="http://www.stltoday.com">Her opinion</a></li>
					<li class="lastLi"><a href="http://www.stltoday.com">Nobody&rsquo;s opinion</a></li>
				</ul>
			</div>
		
			<div id="stlsubnav-jobs" style="display:none;">
				<ul>
					<li><a href="http://www.stltoday.com">Jobs</a></li>
					<li><a href="http://www.stltoday.com">Search Job Postings</a></li>
					<li><a href="http://www.stltoday.com">Most Popular Job Searches</a></li>
					<li><a href="http://www.stltoday.com">testing</a></li>
					<li><a href="http://www.stltoday.com">1</a></li>
					<li class="lastLi"><a href="http://www.stltoday.com">2</a></li>
				</ul>
			</div>
		
			<div id="stlsubnav-rides" style="display:none;">
				<ul>
					<li><a href="http://www.stltoday.com/health/content/health/pollen/index.html">Rides</a></li>
					<li><a href="http://www.stltoday.com/health/content/health/doctors.html">Search New Rides</a></li>
					<li><a href="http://www.stltoday.com/health/content/health/stories/parentingvideo.html">Pre-Owned Rides</a></li>
					<li><a href="http://www.stltoday.com/health/content/shared/health/weightloss/index.html">Find a Dealer</a></li>
					<li class="lastLi"><a href="http://www.stltoday.com/health/content/shared/health/guides/women.html">Research</a></li>
				</ul>
			</div>
			
			<div id="stlsubnav-homes" style="display:none;">	
				<ul>
					<li><a href="http://www.stltoday.com">Homes</a></li>
					<li><a href="http://www.stltoday.com">Buy a Home</a></li>
					<li><a href="http://www.stltoday.com">Sell a Home</a></li>
					<li><a href="http://www.stltoday.com">Apartments</a></li>
					<li><a href="http://www.stltoday.com">Trailers</a></li>
					<li class="lastLi"><a href="http://www.stltoday.com">Tents</a></li>
				</ul>
			</div>
		
			<div id="stlsubnav-shopstl" style="display:none;">
				<ul>
					<li><a href="http://www.stltoday.com">ShopSTL</a></li>
					<li><a href="http://www.stltoday.com">Classifieds</a></li>
					<li><a href="http://www.stltoday.com">Place an Ad</a></li>
					<li><a href="http://www.stltoday.com">test link</a></li>
					<li class="lastLi"><a href="http://www.stltoday.com">test link</a></li>
				</ul>
			</div>
			
		</div>
	<!--NAV Script-->
	<script src="http://images.stltoday.com/stltoday/js/stltoday_nav_script.js" type="text/JavaScript"></script>
	<!--End NAV script-->
	</div>
</div>

<!-- END hdr_uninav -->


</body>
</html>

**brown2500** · Nov 19, 2008, 21:50

Applying CSS to my page

--------------------------------------------------------------------------------

Am a beginner or novice in web design. with practice I was able to link Home page, About Us page and Contact page. When I want to use CSS to style my page, I could not get the required result.

What should I do for am stuck . I need your assistant to enable me continue with the design using CSS.

Thanks for your cooperation.

The SitePoint Forums have moved.

User Tag List

Thread: need help with a 3-level menu

Thread Tools

Display

need help with a 3-level menu

Bookmarks

Bookmarks

Posting Permissions