Indenting a nested menu using CSS

Samuel Russell posted this at 17:18 — 7th May 2006.

They have: 8 posts

Joined: Jan 2006

I'm trying to indent the various levels of a menu using CSS to look consistent across all browsers. Also need to remove the bullet points from the main levels. Can anyone help please?
Thanks

DaveyBoy posted this at 17:31 — 7th May 2006.

They have: 453 posts

Joined: Feb 2003

for the indent maybe the padding-left or margin-left commands.

teammatt3 posted this at 17:39 — 7th May 2006.

He has: 2,102 posts

Joined: Sep 2003

To remove the bullets use
ul {
list-style-type:none
}

Renegade posted this at 20:02 — 7th May 2006.

He has: 3,022 posts

Joined: Oct 2002

You can try this:

ul {
position:relative;
margin:0;
padding:0;
}

ul ul {
position:relative;
margin-left:1em;
}

There is a little inconsistancy with browsers. Sometimes, the space around a ul is padding while other browsers have it as a margin. Setting the position as relative is a little hack/workaround for Opera 6.

Samuel Russell posted this at 20:57 — 7th May 2006.

They have: 8 posts

Joined: Jan 2006

Bullet tip worked thanks but no luck with indents
I'm trying to do smething like this but it's proving a *%@*$

Renegade posted this at 03:42 — 8th May 2006.

He has: 3,022 posts

Joined: Oct 2002

Just made a quick test page, here's the code that I used:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang= "en" lang= "en">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
ul {
position:relative;
margin:0;
padding:0;
list-style:none;
}

li ul {
	padding-left:5em;
}
</style>
</head><body>
<ul>
	<li>Bullet</li>
	<li>Bullet</li>
	<li>Bullet</li>
	<li>Bullet</li>
	<li>
		<ul>
			<li>Bullet</li>
			<li>Bullet</li>
			<li>Bullet</li>
			<li>Bullet</li>
			<li>
				<ul>
					<li>Bullet</li>
					<li>Bullet</li>
					<li>Bullet</li>
					<li>Bullet</li>
				</ul>
			</li>
		</ul>
	</li>
</ul>
</body>
</html>

Samuel Russell posted this at 21:59 — 8th May 2006.

They have: 8 posts

Joined: Jan 2006

Thanks for this.

Can someone please clarify the difference in the following list styles?

#navigation ul li {
}

#navigation ul li span {
}

#navigation ul li ul {
}

#navigation ul li ul li {
}

#navigation ul li ul li.selected {
}

#navigation ul li ul li ul li {
}

#navigation ul li ul li a {
}

Samuel Russell posted this at 22:53 — 8th May 2006.

They have: 8 posts

Joined: Jan 2006

Menu is working fine thanks now other than an unsightly left-margin on IE (Firefox is okay).

The only left padding I can see is 25px on #navigation ul li { but even when I remove this it's the same

Links removed as problem sorted.
Hack * {margin: 0; padding: 0;} added