I've been trying to make nested lists work in an email. Sometimes I may be explaining a logical hierarchy of some kind and want to show something like:

  • Type 1
  • Type 2
  • Type 3

And then I might want subtypes shown under each type (Subtype 1, Subtype 2), indented further with, perhaps, the circle instead of the bullet point.

I've tried doing this multiple ways, but nothing seems to work. If I just do it the usual way with a <ul></ul> inside another <ul></ul> then certain clients mess up the spacing. Yahoo adds tons of space above and below the subitems and Outlook.com/Hotmail also adds a bunch of space under the subitems so it ends up not even looking like one list, but separate lists.

Then I had the idea of just making it all one list, but specifying <li type="circle"> on the appropriate items and then doing <div style="padding-left: 40px"><li>Subitem</li></div> on the ones I want to indent further, so it would appear like they are a sub-list while really just being specially formatted items in one list. But Outlook ignores padding and Outlook.com ignores margin, so whichever one I use won't work in one or the other. Also it seems Yahoo ignores the type="circle" and just shows them all with the same bullet so that doesn't work.

I know the answer might normally involve tables, but I can't use tables to do it. My base template is GetResponse's blank template and the mobile responsiveness turns everything into one column on mobile, so if I used tables then on mobile all the bullets and items would end up on top of each other.

Is this just something email designers know better than to try doing? Is actual nested lists in an email just too much to ask? Or is there something else I should be trying?