> > I have a nested list, > > http://www.sfu.ca/~jdbates/tmp/css/200912230/<http://www.sfu.ca/%7Ejdbates/tmp/css/200912230/> > > > > I want the first level list items to display as a horizontal, gray > > stripe > > > > I want to hide the second level list items, except children of the first > > level list item which has class .active (in this example "Add/edit"), > > e.g. > > > > ul.links ul.links > > { > > display: none; > > } > > > > li.active ul.links > > { > > display: block; > > } > > > > I want these visible second level list items to display as a horizontal > > blue stripe, under the horizontal grey stripe > > > > Here's a picture of what I'm trying to achieve - > > http://www.sfu.ca/~jdbates/tmp/css/200912230/screenshot.png<http://www.sfu.ca/%7Ejdbates/tmp/css/200912230/screenshot.png> > > > > What's the cleanest way to do this? Can it be done without un-nesting > > the list? > > But there is an important usability question to think about. Is the idea > that your visitor would hover the mouse over the top-level menu items > (Add/edit, Import, and Admin) and then the matching second-level menu would > be revealed when they hover?
Much thanks for your insights Mike! but actually I'm not planning any interaction - I just want to get the nested list to look like the screenshot ______________________________________________________________________ css-discuss [[email protected]] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
