SitePoint Sponsor |
|
User Tag List
Results 1 to 2 of 2
Thread: need help with a 3-level menu
-
Nov 19, 2008, 20:25 #1
- 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%;} .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 & 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 & 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’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>
-
Nov 19, 2008, 21:50 #2
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