Nested lists

I am trying to make a nested list, but I can't make it more than one stage of nesting.

I have put an example below. If I put another <ul> under "dog" and list types of dog, it does't work. Does anyone know why this is?

<ul>

<li><a href="#">Animals</a>
<ul>
<li><a href="#">Dog</a></li>
<li><a href="#">Cat</a></li>
<li><a href="#">Fish</a></li>
</ul>

</ul>

 

I don't see any problems with the following code in Firefox or Safari:

<ul>
<li><a href="#">Animals</a>
 
<ul>
<li><a href="#">Dog</a></li>
	
<ul>
<li><a href="#">Chihuahua</a></li>
<li><a href="#">Pitbull</a></li>
<li><a href="#">Beagle</a></li>
</ul>

<li><a href="#">Cat</a></li>
<li><a href="#">Fish</a></li>
</ul>

</ul>

HTML:

 

looks good to me

<ul>
   <li><a href="#">Animals</a>
      <ul>
         <li><a href="#">Dog</a>
            <ul>
               <li>new list</li>
            </ul>
         </li>
         <li><a href="#">Cat</a></li>
         <li><a href="#">Fish</a></li>
      </ul>
    </li>
</ul> 

Code (markup):

 

Should each stage of nesting indent in? Because mine don't.

 

no.

indenting just helps with cleanliness. I find it easier to decipher code if it's indented. Especially if you have an unclosed tag somewhere.

 

I mean in the outputted code.

 

fade to black
your original code was missing a tag

you opened your li
and had the a inside it
and then opened your sub ul
and had the inner list
and closed the sub ul

but you never then also closed the li who was holding the sub ul inside it.

</ul>
</ul>
This is what catches the eye. Since a ul can't have anyone other than a li as a direct child, not even another ul, you know there's something wrong when you have to closing ul tags like that

so insert a </li> between them

 

Can't say I can remember off the top of my head if the indentation is kept for sub-lists or not but I'd think not. The indentation (if you want it to indent further) will depend on the CSS you apply to the lists.

 

I've worked it out now guys. I had closed the <li> before the nested part.