<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.