...

View Full Version : need help with a 3-level menu



SteveMTNO
11-20-2008, 02:40 AM
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



<!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>
<link href="newnav.css" rel="stylesheet" type="text/css" />
</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>
<!--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>

PappaJohn
11-20-2008, 05:11 AM
This example (http://www.cssplay.co.uk/menus/pro_dropline_dropdown.html) give any ideas?

SteveMTNO
11-20-2008, 03:34 PM
This example (http://www.cssplay.co.uk/menus/pro_dropline_dropdown.html) give any ideas?

This looks good, but I need something that keeps the active 'tab' highlighted..

abduraooft
11-21-2008, 08:52 AM
This looks good, but I need something that keeps the active 'tab' highlighted.. This can be easily possible b6y some CSS tricks, see http://www.codingforums.com/showthread.php?t=122490

SteveMTNO
11-21-2008, 05:04 PM
I like the idea of using the body tag to determine which styles are used. At first I didn't think we were going to be able to do that (due to third party wrappers, etc), but it looks like we're going to replace all of them anyway.

Thanks for your help!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum