Hi!

I have this collapsible list which expands when you clikc on the image.
The proble is ima trying to make the main text align to it self when the text grows.

For example Currently it show up like this:
+ New Room
Rooms Roomsss

Should instead look like this when the text become to line or 3 line.
+ New Room
  Rooms Roomsss

How do Make this align Below "new" .
Thanks in advance.

Below is the css and the sample code.


/*****************
START OF LEFT MENU
********************/



#leftrail {
border:0px solid #000;
color:#404040;
padding: 10px 0 0 0;

}

#leftrail ul {
list-style-type: disc;
color:#999;
}


#leftrail ul li {
margin-left:27px ; font-size:11px;
}

#leftrail ul li a{
margin-left:-1.1em ;color:#404040;
}
#leftrail .leftspace {
padding:0 0 0 3px; font-size:11px;
}

html>body #leftrail .leftspace {
padding:0 0 0 0px; font-size:11px;
}

/******************
END OF LEFT MENU
******************/

/*** HTML PART ****/


<ul id="leftrail">
<li>
<span class="leftspace">Products</span>[list]
<li><a href="#">News</a></li>
<li><a href="#">Color</a></li>
<li><a href="#">Fragrance</a></li>
<li><a href="#">Personal Care</a></li>
<li><a href="#">SkinCare</a></li>
<li><a href="#">Other</a></li>
</ul>
</li>

<li>
<span class="leftspace">CEO Corner </span>[list]
<li><a href="#">Color</a></li>
<li><a href="#">Fragrance</a></li>
<li><a href="#">Personal Care</a></li>
<li><a href="#">SkinCare</a></li>
</ul>

</li>
</ul>