jQuery Forum

<div id="tabs">
 <ul>
 <li><a href="#fragment-1"><span>One</span></a></li>
 <li><a href="#fragment-2"><span>Two</span></a></li>
 <li><a href="#fragment-3"><span>Three</span></a></li>
 </ul>
 <div id="fragment-1">
      <ul>
            <li> list 1 </li>
            <li> list 2 </li>
            <li> list 3 </li>
            <li> list 4 </li>
      </ul>      
 </div>
 <div id="fragment-2">
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
 </div>
 <div id="fragment-3">
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
 </div>
</div>
 
<script>
$( "#tabs" ).tabs();
</script>


The ul li in fragment-1 messes up the whole tab widget. 
Searched everywhere but no answer to it. please help.