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 & 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>
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 & 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>