Comments on: Styling Nested Lists

By: Hot Project

Hot Project — Tue, 18 Oct 2005 01:04:52 +0000

I have found nested ul to be very useful, however the visual style of the sub list indent is quite unappealing.
To re-position my nested ul indent, I have found this works:
ul li ul li {
position:relative;
left:-10px
}
It works on IE & Firefox, anyways…

By: Mike P

Mike P — Tue, 27 Sep 2005 14:25:36 +0000

Recently, I tried to achieve an inline bullet list with background images for the bullets, like this:
ul li {display: inline; padding: 0 0 0 2em; background: url(test.gif) no-repeat;} ...



Ipsum lorem dolor sit amet


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec justo. Nam quis lorem. Nunc sem. Fusce hendrerit pretium ligula. Phasellus rhoncus malesuada libero. Aliquam fringilla lacus ac ligula. Quisque vel urna vitae urna semper semper. Sed laoreet orci fermentum sapien. Donec eleifend eros a pede. Cras quis sem ac nunc interdum bibendum. Morbi nec massa. Vivamus molestie metus eget quam. Aliquam erat volutpat. Ut odio. Donec iaculis metus eu ipsum. Mauris venenatis varius ipsum. Phasellus feugiat libero nec est. Nulla facilisi.

The problem lies in the longer li. Here, IE makes its background image bullet magically disappear, whereas NN and Mozilla seem not to have a problem with it.
If anyone has a workaround for this, I’d love to hear about it, as it’s a real pain when you’re trying to do something flexible.

By: Andrew M

Andrew M — Wed, 29 Dec 2004 18:44:41 +0000

Based on the original example above the background list images do not print in IE 6 and Safari 1 and I have “print background images and colors” selected in my browser settings. I swaped the background list style with the list-style-image Stepan mentions and the list images now print BUT I’ve lost most cotrol over aligning my list images. So it seems boths options have their drawbacks and unfortunately I have to go with what is printable over what looks better on screen but won’t print. Any other ideas? This is still a great tutorial!

By: Stepan Reznikov

Stepan Reznikov — Thu, 01 Jul 2004 12:40:06 +0000

What’s the point in using background instead of list-style-image? I think that list-style-image is more appropriate in this case. If you use (background: url(bullet.gif) no-repeat 0 50%;) and an item is long enough that it breaks into two or more lines, that looks not so great.

By: Martin

Martin — Fri, 23 Jan 2004 03:17:36 +0000

Rahul and Andre Leistner asked for the horizontal variant of the navigation. alistapart describes perfectly detailed how to do that. (Just add 'display: inline;' to ul and li!) Very usefull site, thank you!

By: Alderete

Alderete — Tue, 25 Nov 2003 01:43:15 +0000

I love this technique for site maps and site navigation. One thing I noticed when doing this on my own site is that, because I’m putting the site map in a sidebar, my horizontal space is limited. Most of the online examples I’ve found are more interested in simulating buttons by way of a {display:block}, etc. than the relatively simple styling example you have here.
I prefer to keep the outline format, as you have, but this example stops short of adjusting the indentation, etc., which I also wanted to do.
I was able to achieve 80% of what I wanted by adding one new rule (#sitemap ul { margin: 0; padding: 0; }), and one addition to one of your rules (#sitemap li ul { padding-left: 1.5em; }), but I would love to see more comprehensive treatment of the possibilities…
Thanks for a nice example!

By: Ryan

Ryan — Fri, 14 Nov 2003 18:39:47 +0000

chris–i’m with you on using dl’s for navigation. what it enables that ul’s may not is the flexibility to use second level elements when not every first level element contains second levels….did that make sense? i guess what i’m trying to say is that the dt tag does not have to contain a dd tag. so you could use your dt’s for ‘headers’ as the firebird site did or you could use them as level1 elements and use your dd’s for any sublevel elements which is a workaround for nesting (to a certain degree)
rahul–i’ve used nested lists (dl’s and ol’s) to create a tree-list(of sorts) that expands when users click on an icon or it’s corresponding title. it uses a little bit of shareware javascript that switches the display property of the ol when the user clicks on the dl. so like many computer problems – there are all sorts of possibilities out there to achieve your windows list…

By: Chris

Chris — Wed, 12 Nov 2003 03:51:29 +0000

Dan,
Your articles are consistently high signal :: noise ratio – thank you!
Any thoughts (semantically speaking) about using definition lists for site navigation (e.g. the Mozilla FireBird site http://texturizer.net/firebird/ ) vs. using nested unordered lists?

By: jim

jim — Tue, 04 Nov 2003 00:39:05 +0000

just as soon as I begin to forget … I come across this page. Looks like another night at the bar. Game 7 never happened. Game 7 never happened. Game 7 never happened. Game 7 never happened. Game 7 never happened.

By: Ian Lloyd

Ian Lloyd — Tue, 28 Oct 2003 15:51:10 +0000

Thought I might share this with you – when I was re-working the Site Map for Nationwide.co.uk, I also went for the nested list approach with images in CSS used to denote structure. Doesn’t *look* like a list, but it surely is …
http://www.nationwide.co.uk/sitemap.asp?s=home