use jquery .tabs() - content overlay page

Question

I am VERY new to JQuery. Just trying to get a feel. I like the tab feature demoed here: http://jqueryui.com/demos/tabs/#mouseover

I really like this, however I would like it to act a bit more like a Menu. Particurally I would like the tab content to apear OVER the content on the page (like a menu). Also, just as when I rollover the tabs the content changes, when I am not rolled over any tabs(or maybe instead when the user clicks anywhere else on the page) I would like the tab content to go away(like a menu).

So really I want to use it as a menu. If someone knows of a menu control that could solve my problem that would work too. I just like the fact that when I hover over an item a div popups up. I want to put some text and two buttons in each div.

Thanks!

This is what I had originally: This in the Header:

$("#tabs").tabs().find(".ui-tabs-nav").sortable({ axis: 'x' });
$("#tabs").tabs({ event: 'mouseover' });

And this in the body:

 <div id="tabs">
            <ul>
                <li><a href="#tabs-1">First</a></li>
                <li><a href="#tabs-2">Second</a></li>
                <li><a href="#tabs-3">Third</a></li>
            </ul>
            <div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
            <div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
            <div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
        </div>

Answer 1

jQuery supports a very rich plugin model. You may want to look at a Menu Plugin rather than trying to manipulate the tabs to work like a menu.

Answer 2

Here's an example of how to achieve this sort of behavior using jQuery. The example is very plain, but you can style it however you want.

Answer 3

The styling seems to break when absolute positioning is applied. Any ideas how to fix it?