Multiple level unordered list styling

HTML & CSS
1

Hello everybody… Thanks for taking a look at this…

I’m designing a page that has a leveled unordered list as the navigation system (loads of content…) I know this has probably been asked, but I’ve tried googling and searching this site, and can’t seem to find what I need…

If I’ve got something like the following:


<ul class="level1">
  <li>Heading 1</li>
     <ul class="level2">
        <li>Sub-heading 1</li>
        <li>Sub-heading 2</li>
     </ul>
    <li>Heading 2</li>
      <ul class="level2">
        <li>Sub-heading 1</li>
          <ul class="level3">
             <li>Sub-sub-heading1</li>
             <li>Sub-sub-heading2</li>
          </ul>
      </ul>
</ul>

How can I control the indentations with the multiple levels using CSS? Using a margin-left doesn’t get rid of the indentation, but does nothing but add to it… text-indent isn’t doing it either… I’d much rather not split the thing up into loads of divs…

Thanks everyone,
James

2 

<ul class="level1">
  <li>Heading 1[B]</li>[/B]
     <ul class="level2">
        <li>Sub-heading 1</li>
        <li>Sub-heading 2</li>
     </ul>
    <li>Heading 2[B]</li>[/B]
      <ul class="level2">
        <li>Sub-heading 1[B]</li>[/B]
          <ul class="level3">
             <li>Sub-sub-heading1</li>
             <li>Sub-sub-heading2</li>
          </ul>
      </ul>
</ul>

Bad html code.
Try something like this:


<ul class="level1">
  <li>Heading 1
     <ul class="level2">
        <li>Sub-heading 1</li>
        <li>Sub-heading 2</li>
     </ul>
  [B]</li>[/B]
  <li>Heading 2
      <ul class="level2">
        <li>Sub-heading 1
          <ul class="level3">
             <li>Sub-sub-heading1</li>
             <li>Sub-sub-heading2</li>
          </ul>
        [B]</li>[/B]
      </ul>
  [B]</li>[/B]
</ul>

Have a look at http://www.sitepoint.com/forums/showthread.php?t=282716 or at [URL=http://bonrouge.com/menumaker.php]http://bonrouge.com/menumaker.php if you want to use list as menu.

If you just want to change the left space of your items, add " .level2{margin-left: 0; padding-left: 0;}" for example in your style part (margin for IE, padding for FF).

If it doesn’t answer your question, please give an example of your needs.

L.H.

3

Hi,

As Linn saids padding is used for the default indentation in firefox and margin is used in ie therefore setting both to zero will align all the lists left.

To address styles in sublists you don’t need extra classes as you can simply use specifity to target them and keep your sub-lists class free.
e.g.


ul li ul {color:red}
ul li ul li ul {color:blue}
4

Excellent advice. Thanks everyone,
James

5