Javascript でインタラクティブな UI を作るときのコツ

例えばマウスオーバーで大項目に紐付けられた小項目が現れるようなプルダウンメニューを作る場合。
大項目の要素に Event.ovserve で小項目を Element.show な訳だけど。
問題になるのが小項目をデフォルトで隠しておく処理。
link タグによる CSS 外部読み込みや style タグで小項目の要素に display:none; した場合、javascript を実行しない環境で閲覧している場合に小項目にアクセスできない。
javascript が実行される環境のみで一旦 Element.hide を小項目すべてに対して行う方法も有るが、この場合実行コードは window.onload 以降になるので画面のレンダリングが完了するまでは小項目が見えたままになる。
これを回避するには、隠しておきたい要素に対して display:none; を指定した style タグを document.write で書き出す。
そういえば外部スタイルシートで display:none; を指定した要素 (class) は Element.show が効かなかったような気がしてきた。そう言う場合はデフォルトで消しておきたい要素に専用の class をつけておいて、window.onload 時に Element.removeClassName 。