Ваш html недействителен. Я внес изменения, необходимые для исправления в этой скрипке:
http://jsfiddle.net/4BmPb/1/
<input type="button" id="topic" value="please select a topic"/>
<div class="c"></div>
<ul id="opt_0">
<li class="opt_0">finance</li>
<li class="opt_1">
<ul>
<li>business</li>
<li>stock</li>
<li>company</li>
<li>startup</li>
</ul>
</li>
<li class="opt_0">IT</li>
<li class="opt_1">
<ul>
<li>internet</li>
<li>code</li>
<li>hardware</li>
</ul>
</li>
</ul>
<input type="hidden" name="topic"/>
Элемент ul
может содержать только элементы li
, но не другие элементы ul
.
Что касается того, почему он работает в других браузерах, другие браузеры не так строги, как IE со структурой html. Я проверял это в IE9, который представлял ту же проблему, не проверял в IE7, но я подозреваю, что это тоже будет работать.