CSS sibling selectors

[bibi moto]

I'm having a little trouble and I'm sure there's a simple fix for this seemly trvial question.I have my HTML page setup with like the follow:\[code\]<ul class="locations"> <li> Georgia <ul class="children"> <li> Fulton County <ul class="children"> <li> Atlanta </li> </ul> </li> </ul> </li></ul>\[/code\]I'm trying to style the "parents" list items one way, the "children" one way, and the "grandchildren" another way.I've tried the following:\[code\]ul li{ list-style: none; margin: 0;}ul.locations li+ul.children li{ margin-left: 15px; clear: both;}ul.locationsli+ul.children li+ul.children li{ float: left;}\[/code\]Where I want the "grandchildren" in this instance to float next to each other...regardless of how I work this our, \[code\]clear:both;\[/code\] seems to be applied to both the "children" and "grandchildren" items. I also tried using \[code\]>\[/code\] as a CSS selector with no luck.Any ideas on fixing this? TIA