INNER LI Positioning

[Run2Web]

<ul>
   <li class="bold">Fruit Flavored Energy Bars!<br />
	  <ul>
		 <li style="list-style:none; display:inline;"><span class="small"> Cherry - Raspberry - Lemon - Orange - Vanilla</span></li>
	  </ul>
   </li>
</ul>

How can I make it so that the inner list is not so far embedded into the page? I want to somehow get the inner list here to be like 5 pixels or so inside the outer LI. Right now it lines up under the "V" in flavored. I would like to get it lined up under the "t" in Fruit

Hope that makes sense.

[Paul O'B]

Hi,

You could try something like this:

<style type="text/css">
ul ul{
 margin-left: 20px;
 padding-left:0px;
}
</style>

I think that should work

Paul

[Run2Web]

<style type="text/css">
ul ul{
margin-left: 20px;
padding-left:0px;
}
</style>

ul ul? Is that correct?

[Run2Web]

I got it to work with your suggestion Paul, Thanks Tons!!!!

I placed the style definition in the inner "ul" and it works beautifully.

[Paul O'B]

ul ul? Is that correct?

Yes it's correct it targets only the inner ul. (i.e the ul inside the ul). Just the same as div p {} would target the pargraph in the div.

Placing the style in the inner list with a class would have the same effect (I suppose Iwas trying to be clever

Paul

[Run2Web]

Cool, learn something new everyday!