Problems with jQuery UI tabs and children UL

I'm having some trouble with jQuery UI tabs. I'm using the default tab markup:

<div id="tabs">

    <ul>
        <li><a href="#tab1">tab 1</a></li>
        <li><a href="#tab2">tab 2</a></li>
    </ul>
    <div id="tab1">
    </div>
    <div id="tab2">
    </div>
</div>

However, i want to display a list before my tabs. Like this:

开发者_高级运维

<div id="tabs">
    <p>Lorem ipsum dolor</p>
    <ul>
        <li>asdasdasd</li>
        <li>asdasdasd</li>
    </ul>
    <ul>
        <li><a href="#tab1">tab 1</a></li>
        <li><a href="#tab2">tab 2</a></li>
    </ul>
    <div id="tab1">
    </div>
    <div id="tab2">
    </div>
</div>

And i don't want this list to be recognized as tabs. How can i do that?

---

You would have to put them before the div#tabs as the jQuery UI tabs functionality looks at all li in the div as far as I know.

---

Maybe this ?

<div id="content">
    <p>Lorem ipsum dolor</p>
    <ul>
        <li>asdasdasd</li>
        <li>asdasdasd</li>
    </ul>
</div>
<div id="tabs">
    <ul>
        <li><a href="#tab1">tab 1</a></li>
        <li><a href="#tab2">tab 2</a></li>
    </ul>
    <div id="tab1">
    </div>
    <div id="tab2">
    </div>
</div>

Update:

<div id="tabs">
   <div id="content">
       <p>Lorem ipsum dolor</p>
       <ul>
           <li>asdasdasd</li>
           <li>asdasdasd</li>
       </ul>
    </div>
    <ul>
        <li><a href="#tab1">tab 1</a></li>
        <li><a href="#tab2">tab 2</a></li>
    </ul>
    <div id="tab1">
    </div>
    <div id="tab2">
    </div>
</div>

Try this one i've not tested it