I set up a test site to play with menus. eventually this will be my personal site, but right now I'm just playing.
I have a question. There is a menu with 2 levels. Photos appears in level one, then 2 selections are in level 2. What I want is when someone selects an item from level 2 for photos to remain highlighted. You will see if you select "Jonah" from level 2 and go back into the menu, "Jonah" stays highlighted. On top of that, I want "Photos" to be highlighted as well. How do I do that? The site is http://reynacho.net The specific CSS I'm using (or trying to use) is: #nav li.active > ul li + a.drop { background:#225588; color:#ffffff; background-image: url('images/bullet_arrow_right.gif'); background-position:right; background-repeat:no-repeat; } However, I'm not sure if that is correct. Here's the code: <body id="typeA"> <div id="wrap"> <div id="header"> <span id="headerShadow2">reynacho.net</span><span id="headerShadow1">reynacho.net</span><span id="headerText">reynacho.net</span> </div> <div id="contentWrap"> <div id="sideNav"> <ul id="nav"><li><a href="/">Home</a></li><li><a class="drop" href="/index.cfm?objectid=5E58F7C4-9027-F64A-79F7D534A6880BBB">Photos</a><ul><li><a href="/index.cfm?objectid=5E58F7D3-9027-F64A-79262D26B5191BBB">Jonah</a></li><li class="active"><a href="/index.cfm?objectid=5E58F7E3-9027-F64A-799D907BBCF08C87">San Diego (Feb. 2006)</a></li></ul></li><li><a href="/index.cfm?objectid=5D7DDFBD-9027-F64A-791AB0845FE668E8">Test</a></li></ul> </div> <div id="content"> </div> <div id="footer"> <p>Driven by <a href="http://farcry.daemon.com.au/";>Farcry Open Source CMS</a>. Powered by <a href="http://www.macromedia.com/";>ColdFusion MX</a>.</p> </div> </div> </div> </body> CSS for Nav stuff: /* menu stuff */ /* main ul id="nav" stuff */ #nav { width:145px; margin-left:35px; list-style-type:none; font: arial,tahoma,verdana,sans-serif; font-weight:bold; color:#225588; border-left: 1px solid #225588; border-top: 1px solid #225588; border-right: 1px solid #225588; padding:0px; } #nav li { border-bottom:1px solid #999999; } /* style the links for the top level */ #nav a, #nav a:visited { display:block; text-decoration:none; color:#225588; padding-left:5px; } /* for a.drop, add the arrow */ #nav a.drop, #nav a.drop:active { background:#ffffff; background-image: url('images/bullet_arrow_right.gif'); background-position:right; background-repeat:no-repeat; } /* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! !!!!!!!!!!!!!! IMPORTANT !!!!!!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! This keeps level 1 menu item highlighted when rolling over level 2 */ #nav :hover > a.drop { color:#ffffff; background:#225588; background-image: url('images/bullet_arrow_right.gif'); background-position:right; background-repeat:no-repeat; } /* this sets the style of the currently active item */ #nav li.active a{ background:#225588; color:#ffffff; } /* style hover links for top level */ #nav a:hover { color:#ffffff; background:#225588; } /* drop class hover */ #nav a.drop:hover { color:#ffffff; background:#225588; background-image: url('images/bullet_arrow_right.gif'); background-position:right; background-repeat:no-repeat; } /* style active drop classes */ #nav li.active a.drop{ background:#225588; color:#ffffff; background-image: url('images/bullet_arrow_right.gif'); background-position:right; background-repeat:no-repeat; } /* sub menu */ /* this is set to display:none by default */ #nav ul { padding:0; margin-left:145px; margin-top:-21px; border: 0px; list-style-type:none; display:none; border-left: 1px solid #225588; border-top: 1px solid #225588; border-right: 1px solid #225588; position:absolute; } #nav ul li a{ padding-left:5px; } /* display sub menu on :hover */ #nav li:hover ul { display:block; } /* this sets the style of the currently active item in the 2nd level */ #nav ul li.active a{ background:#225588; color:#ffffff; } /* style the second level links */ #nav ul a, #nav ul a:visited { background:#ffffff; color:#225588; width:140px } #nav ul a:hover { background:#225588; color:#ffffff; width:140px } /* style hover links for 2nd level */ #nav ul a:hover { color:#ffffff; background:#225588; } #nav li.active > ul li + a.drop { background:#225588; color:#ffffff; background-image: url('images/bullet_arrow_right.gif'); background-position:right; background-repeat:no-repeat; } -- Jake Churchill CF Webtools 11204 Davenport, Ste. 200b Omaha, NE 68154 http://www.cfwebtools.com 402-408-3733 x103 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~| Create robust enterprise, web RIAs. Upgrade & integrate Adobe Coldfusion MX7 with Flex 2 http://ad.doubleclick.net/clk;56760587;14748456;a?http://www.adobe.com/products/coldfusion/flex2/?sdid=LVNU Archive: http://www.houseoffusion.com/groups/CF-Talk/message.cfm/messageid:263224 Subscription: http://www.houseoffusion.com/groups/CF-Talk/subscribe.cfm Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=11502.10531.4
