List Positioning

[Perfect S.]

Hi,I've been trying to find out if there is a way to place an unordered list inside the <li> of another unordered list and make it appear a certain number of pixels to the right that works in ie/firefox/whatever else.Like this (but without the white blotch and the second list being beside hey 3 which it is contained in):I'm trying to do this for a side bar that uses javascript that hides uls and then makes them visible (display: none; / display: block;) when you click on the element that contains it.Is what I'm trying to do possible? If not are there any other ways to do this that are simple enough?

	<ul>		<li>Hey 1</li>		<li>Hey 2</li>		<li>Hey 3			<ul id="sub">				<li>Hellow 1</li>				<li>Hellow 2</li>				<li>Hellow 3</li>			</ul>		</li>		<li>Hey 4</li>	</ul>

ul {	list-style-type: none;	width: 100px;	border: 1px solid #000000;	margin: 0px;}ul#sub {	position: relative;	left: 100px;	list-style-type: none;	display: block;}

Any help would be greatly appreciated, thanks.

[BiteMe]

Try this