Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Feb 2008
    Posts
    81
    Thanks
    2
    Thanked 0 Times in 0 Posts

    need help with a 3-level menu

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

  • #2
    Senior Coder
    Join Date
    Apr 2007
    Location
    Quakertown PA USA
    Posts
    1,028
    Thanks
    1
    Thanked 125 Times in 123 Posts
    This example give any ideas?

  • #3
    New Coder
    Join Date
    Feb 2008
    Posts
    81
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by PappaJohn View Post
    This example give any ideas?
    This looks good, but I need something that keeps the active 'tab' highlighted..

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,849
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Quote Originally Posted by SteveMTNO View Post
    This looks good, but I need something that keeps the active 'tab' highlighted..
    This can be easily possible b6y some CSS tricks, see Change link text style for current page.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New Coder
    Join Date
    Feb 2008
    Posts
    81
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •