Ciao,
cercherò di rispondere alle tue questioni senza però avere l'articolo e l'esempio.
L'articolo non posso leggerlo per via dei '....' nel link postato precedentemente, l'esempio non serve più di tanto con il codice che hai postato assieme alle domande.
Quindi:
display:inline -> fa si che gli elementi li vengano disegnati in orizzontale anziché verticale, come di default vengono disegnati gli elenchi.
Il resto penso che sia per rendere il codice valido su più browsers.
2)Imposta una dimensione massima su tutti i browsers: non tutti i renderer producono le stesse cose!
3)overflow: hidden; -> Tutto il contenuto che stra-borda dal contenitore non viene mostrato. L'alternativa sono le scrollbars.
4)Penso che sia un errore di scrittura.
penso sia da interpretare così: li.sf:hover ul.
Così avrebbe senso, per esempio, nel caso in cui stessimo parlando di un li,
magari selezionato e quindi con classe sf, che comunque deve comportarsi come gli altri li dell'elenco.
Ciao io utilizzo IE7, firefox + plug-in per IE: così posso testare con il mio IE7, con firefox e, sempre con FF, simulare IE6 (e alcune cose di IE8) .
Spero di esserti stato di aiuto.