View Full Version : Nested List item control

07-31-2007, 10:50 AM
Hey guys, been awhile.
I have a list, we'll make it simple:

<li>Top Item 1
<li>Sub Item 1 A</li>
<li>Sub Item 1 B</li>
<ul class="activeLink">
<li>Top Item 2
<li>Sub Item 2 A</li>
<li>Sub Item 2 B</li>

I want it to look sort of like this:

Item 1 Item 2

And if there is a activeLink class found, the sub items to be displayed below:

Item 1 Item 2
Sub Item 2 A Sub Item 2 B

Almost got it to work, except the sublinks appear with relation to the top heading (so the Item2 sublinks are indented to below the Item2 item). That and I haven't removed the ul indentation yet, but I'm not so worried about that atm.
As well, I use a new unordered list between each primary item, would this be easier to simply drop it and apply the activeLink class to the list item itself? The current css code in use is like so:

#modLinks ul li { display: inline; float: left; list-style: none; position: relative; margin: 0px 15px; padding: 0px;}
#modLinks ul li ul { display: none;}
#modLinks ul.activeLink li ul { display: inline; border: 2px inset; padding: 0px;}
#modLinks ul li ul {clear: both; float: left; width: 100%;}
#modLinks ul li ul li { margin: 0px; padding: 0px 15px; float: left;}

Any ideas? I don't want to do extensive redesign of the lists, but can do minor changes.
Thanx in advance mates!

07-31-2007, 02:39 PM
I'd strongly advice you to unite the top list items in a single list and apply the activelink class to the active list item itself as you suggested.

If you want the sub lists to appear in the same spot regardless of which top level item is active, you could make use of absolute rather than relative positioning; the top level list could function as a positioning parent by making it positioned itself (i.e. relatively positioned with no offsets).

07-31-2007, 03:47 PM
Thats sort of the idea I was thinking of, but I wasn't certain how the absolute would work in relation to the parent.
I will alter my lists, thanx for the advice ronald! I'll be back if I have any other troubles ;)