Nested Lists

Ever wanted to be more specific with your lists. You can nest lists inside of other lists. The basic premise is that you are creating a list within a list. So the first thing you need to do is create a basic list. To do that you need to know how to use the <ul> and <li> tags. It’s quite easy all you have to do is use to <ul> tag to start a new list. Then for every item in that list you start it and end it with a <li> tag.

Code for an unordered list.

This is what the code for a quick unordered list looks like.

Now this is where it gets a little tricky. The above code produces a quick bulleted list with two bullets that have the text that is written in there. To get to the next level and have a nested list. what you have to do is instead of putting the closing</li> tag after every bullet, you would just start another list. That would mean that after you type whatever text you want to go in the first level of the list then you would then put another <ul> tag and then begin the next level of the list. This is what that part of the code should look like.

The code for both levels of lists.

This is what the code for the nested list looks like.

So starting from the top of that long bit of code I just put up here’s what it does. The first <ul> tag creates the entire list.  The first <li> tag creates the first item in that list. The next <ul> tag creates the smaller list inside of the bigger list. The next two sets of <li>,</li> tags create the items in that smaller list. Then you have to close the smaller list and the first item in the main list. Then I repeated the process for a second item in the main list, and after I was done with the second item I closed the entire main list too.

Once you’ve done all of that it should come out looking something like this when you open it on the internet.

Final Product

This is how it looks when I open it in Google Chrome.

Chris Collier

~ by collier3773 on November 7, 2011.

One Response to “Nested Lists”

  1. […] Nowadays most navigation on websites are uniform. What I mean by that is that you can get to most pages  you wanna get to on that website from the page you’re on. One way to do that is to utilize drop down navbars. To make a drop down navbar you first need to know how to make lists and beyond that nested lists. You can learn that here […]

Comments are closed.

%d bloggers like this: