SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

  2. #2
    SitePoint Member brown2500's Avatar
    Join Date
    Nov 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

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