title: change font-size of nested elements in list
body: <p>I have a nested list of ul elements.  I would like to decrease the font size by a couple of pixels for each level down.  </p>
  
  <p>So for example the first li elements would have font size 18px, then nested elements of that would have font size 16px and any nested elements of that would have font size 14px etc. However once the font size gets to a certain size e.g. 8px I would like to stop making them any smaller.</p>
  
  <p>These lists are generated on the fly so I have no way of knowing how deep they are going to be so can't just hard code the css to a certain level.  Is there a way in css or JQuery where I could apply this type of formatting? </p>