If you want the children and grandchildren to be 90% font-size of the parent then writing

css Code:

ul#menu ul {font-size:0.9em/* or 90% */;}

will make the children 90%, but the grandchildren get the rule twice (inherited and directly applied) and become 81%. If you don't want that you could use rem

css Code:

ul#menu ul {font-size: 0.9rem;}/* child 90%, grandchild 90% */

but personally I would have written

css Code:

ul#menu> li > ul {font-size:0.9em;}

I prefer that because it's more explicit about what's happening: the second level of menus are 90%, and since the grandchildren only get the rule once (through inheritance) they're also 90%.

As for reset CSS, I don't like them. Partly because they've never worked well for me either, but mostly because of the intention behind them: "I want this page to be identical/pixel-perfect in all browsers". I hate that mentality. Stop trying to fight the system and just work within it. Except for IE quirks, and I think one bug with Chrome I don't remember much about, I've never had browser differences be a problem. No, the pages aren't pixel-perfect for the design (inevitably designed by someone more familiar with print design than web design) but taken individually they're perfectly fine.

Great explanation Requinix. Basically the difference between ems and rems is that ems are scoped to the direct parent and rems are scoped to the root of the document. Both have their pros and cons. I would say the the choice between the two depends on intent. Rems can be easier to manage if there are is lots complex type sizing and you don't want to haggle with the arithmetic to calculate sizes. ems, can be really powerfull for handling responsize type. Especially when mixing ems with viewport units. Here is my writeup on that topic.https://paulkinchla.com/blog/relative-type/