How to indent part of pages (like sub-pages) w/ HTML

Hey everyone,

I'm creating a pretty basic HTML site and I would like to have pages, and then sub-pages which are slightly more indented then the main pages.

Like this:


I know I could use " " but I'm not sure if that'd be the best way to do it. Is there any other way?

Thanks.

 

<ul>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3
<ul>
<li>Sub-Page 1</li>
<li>Sub-Page 2</li>
<li>Sub-Page 3 </li>
</ul></li>
<li>Page 4</li>
</ul>

 

Thanks! How would I avoid the indent the <ul> makes on the first one?

Now it looks like:


I would prefer if I didn't have the Page 1, Page 2, etc. indent, and just have the Sub-Pages indent, without the gap between "Page 3" and "Sub-Page" .

 

<ul style="list-style:none; padding:0; margin:0;">

 

Hi Drew,

As YIAM said, you'll have to use an unordered list for this (which makes sense, since a menu is just a list of links), with your nested pages being a nested unordered list.

Start off by giving your main list an ID, I prefer to use "menu" for this (since that's what it is). From there, you can target the list items, links and nested lists directly via CSS.

<ul id="menu">
	<li><a href="#">Page 1</a></li>
	<li><a href="#">Page 2</a></li>
	<li>
		<a href="#">Page 3</a>
		<ul>
			<li><a href="#">Sub-Page</a></li>
			<li><a href="#">Sub-Page</a></li>
			<li><a href="#">Sub-Page</a></li>
		</ul>
	</li>
	<li><a href="#">Page 4</a></li>
</ul>

Code (markup):

Then, in your stylesheet, remove the margins, padding and list bullets from the lists.

#menu, #menu li, #menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

Code (markup):

Then style to taste. If you want the submenu to appear to the right of the main list, give it a left margin. Of course, it does help to give the main list (#menu { } ) a width.

If you can show me how you want the menu to look exactly, I'll be able to show you how to style it (without changing the HTML) to make it look how you want.